I am a beginner and I am using pure javascript for DOM manipulation. I am not able to get all the divs in my section element. I get undefined. Please tell me what is the error and how I can fix it.
HTML
<section class="main-content">
<aside>
<p>
<span class="sidebartext">Watch this space for breaking news items.</span>
</p>
</aside>
<section class="notes">
<div id="Services" class="nav-pages active">Services</div>
<div id="Resources" class="nav-pages">Resources</div>
<div id="Contact-Us" class="nav-pages">Contact Us</div>
<div id="Company" class="nav-pages">Company</div>
</section>
</section>
JS
var navTabs = document.getElementsByClassName('notes').children;
console.log(navTabs);//undefined
No jQuery answers please !!!
getElementsByClassName returns an array of elements (actually, array-like - see #Hamms comment below), so children is undefined on it. If there's only one notes section, you can choose to use id="notes" instead (with getElementById) or iterate through the above array and access children from that.
That happens because getElementsByClassName returns an HTMLCollection or NodeList. If you console log just that element, "notes" you will see why you are getting an undefined.
Replace your JS code by:
var navTabs = document.getElementsByClassName('notes');
console.log(navTabs);
That will output an array which once expanded, it will show the content of the position [0]. If you expand that one you will get your NodeList labeled as childNodes. Expand it and you will get your divs.
Try this to get directly your divs:
console.log('Items: ',navTabs[0].childNodes);
Related
site i am selecting from looks roughly like this
<div class="start-left">
...
<div class="news-post">...</div>
<div class="news-post">...</div>
<!-- want to get this one above -->
<div class="news-post">...</div>
<div class="news-post">...</div>
<div class="news-post">...</div>
<div class="news-post">...</div>
...
</div>
tried this but didnt work on either firefox or chrome
document.querySelector('.start-left div:nth-child(2)')
is this even possible or do i need to rething how i am doing this? I am using puppeteer for a webscraper and need to be able to press a link in a specific news post, e.g the second one
nth-child(n) counts all children of the element, regardless of the type of element (tag name). If there are other elements of different type coming before your target element nth-child will fail to find the correct element and may return null.
However, the selector nth-of-type(n)
matches elements based on their position among siblings of the same
type (tag name)
and ignores elements of a different type.
// nth-child(2) returns null because the 2nd element is not a div
var wrongElement = document.querySelector('.start-left div:nth-child(2)');
// nth-of-type(2) filters using the type of element
var correctElement = document.querySelector('.start-left div:nth-of-type(2)');
console.log('div:nth-child(2): ' + wrongElement);
console.log('div:nth-of-type(2): ' + correctElement.outerHTML);
<div class="start-left">
<p class="news-post">...</p>
<p class="news-post">Not this</p>
<div class="news-post">...</div>
<div class="news-post">This one</div>
<!-- want to get this one above -->
<div class="news-post">...</div>
</div>
You could use your work-around by adding the number of preceding elements to the selector, eg nth-child(4), however, a more robust solution is to use nth-of-type(2).
I have the following HTML structure:
<div collection>
<h2>Title</h2>
</div>
<hr>
<div collection>
<h2>Title</h2>
</div>
<hr>
<div collection>
<h2>Title</h2>
</div>
I am trying to write a function that passed an integer argument, it will clone each of those DIVs below themselves. So for example if I pass a 1, there will be no changes; with 2, there will be 2 DIVs, then other content, then 2 DIVs again, etc.
The problem is easy so far, because I can just use a jQuery selector and clone the DIVs, but it only works if the function is called once. If a second time in the future I want to call the function again, it will apply to the "new" elements as well... I have no idea how to proceed with this. Any idea?
Just give the clones an identifying feature, such as a class, and remove them prior to the operation.
You can give some unique id or class to your div, then, when you copy it, don't add this unique attribute to newly created elements. This will help you to identify original element when copy will be executed for second time.
<div collection id="title-div">
<h2>Title</h2>
</div>
I can't make TinySort put elements with a missing attribute below the sorted elements. Options like "place" and "emptyEnd" don't change the order at all.
Please take a look:
https://jsfiddle.net/dm8cz4ra/1/
If I pick only the elements with the attribute using nodeList = $('#list > div[position]') they always land at the end.
I think it is working, but you need to inform TinySort that a position is existing. So instead of:
<div id="list">
<div position="0">0</div>
<div position="-1">-1</div>
<div position="1">1</div>
<div>NULL</div>
</div>
Use
<div id="list">
<div position="0">0</div>
<div position="-1">-1</div>
<div position="1">1</div>
<div position="">NULL</div>
</div>
Fiddle
I have a very simple webpage I took from a template. On the right I have a list of links in a div and when clicking on them I want an html page located on my server to load in the inner div area. When clicking on the link, nothing happens. I've also tried setting the innerHtml to just a text value in case the src part is invalid, but that too does nothing. What am I missing? This looks like all the examples I've gone through.. And note I'm only giving the partial html, so I know the body isn't closed etc.
I have:
<body>
<script>
function results()
{
document.getElementsByClassName('mid-left-container').innerHTML="src="..\VRS_BVT\VRS_Test.html""
}
</script>
<div id="main-wraper">
<div id="top-wraper">
<div id="banner">Automation Server</div>
</div>
<div id="mid-wraper">
<div class="mid-wraper-top">
<div class="mid-leftouter">
<div class="mid-left-container">
blah blah
</div>
</div>
<div class="right-container">
<div class="right-container-top">
<h3><span class="yellow-heading">Projects</span></h3>
<ul>
<li>VRS BVT</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
getElementsByClassName() returns an array (actually a NodeList) of matching elements.
You're creating a new innerHTML property on that array, which has no effect.
Instead, you need to get an actual element from the array and set its innerHTML:
document.getElementsByClassName(...)[0].innerHTML = ...
Also, your string literal is invalid syntax.
You need to use single-quotes or escape the double-quotes.
Also, putting src="..\VRS_BVT\VRS_Test.html" in the content of an HTML element will not load anything from the server.
You need to use AJAX or an <iframe>.
I have implemented jQuery masonry to our site and it works great. Our site is dynamic and users must be able to add/remove masonry box's. The site has an add example but no remove example. Our db is queried returning x number of items. Looping through they are loaded and displayed. Here's a code sample: (we are use F3 framework and the F3:repeat is it's looping mechanism.).
<div id="container" class="transitions-enabled clearfix" style="clear:both;">
<F3:repeat group="{{#productItems}}" value="{{#item}}">
<div id="{{#item.itemId}}">
<div class="box">
<div class="view"> <!-- for css -->
<a onclick='quickRemove("{{#item.itemId}}")>
<img src="{{#item.pic}}" />
</a>
</div>
<p>
{{#item.title}}
</p>
</div>
</div>
</F3:repeat>
</div>
In the javascript code the item id number is unique and is passed into the function. It's also the div id# to distinguish each box. I've tried various combinations and methods but can't seem to get this to work.
function quickRemove(item){
var obj = $('#'+item+'').html(); // item is the product id# but also the div id#
$('#container').masonry('remove',obj);
$('#container').masonry('reloadItems');
$('#container').masonry('reload');
}
Has anyone out there successfully removed an item and how did you do it?
Thx.
Currently you appear to be passing a string full of html to the masonry remove method. Pass it the actual jQuery wrapped element by not including .html()
function quickRemove(item){
var obj = $('#'+item+''); // item is the product id# but also the div id#
$('#container').masonry('remove',obj);
$('#container').masonry('reloadItems');
$('#container').masonry('reload');
}