How can I use jQuery to find out how many children an element has?
Say I have the following structure:
<div id="container">
<div id="column1">
<div id="asset1"></div>
<div id="asset2"></div>
</div>
<div id="column2">
<div id="asset1"></div>
<div id="asset2"></div>
</div>
</div>
I want to find out how many children the div element: container, has. In this case it would return 2...
Use children and length:
$("#container").children().length
Use the direct children selector (>) and the length property:
$('#container > *').length
Example - http://jsfiddle.net/TtV8d/
Related
I'm trying to remove the following DIV's:
<div class="whatever_name">
<div class="whatever_name">
<h2>subtitle</h2>
<p>content<p>
</div>
</div>
and need the following output:
<h2>subtitle</h2>
<p>content<p>
Using jQuery, I can not use remove() because it clear the content too. With pure javascript, happens the same.
I have no idea how to accomplish this issue.
Any idea?
EDIT:
Not always the structure is the same. It can vary, i.e.:
<div class="whatever_name">
<div class="whatever_name">
<div class="whatever_name">
<h2>subtitle</h2>
<p>content<p>
</div>
</div>
</div>
Just need an iterator that can handle such task.
Use unwrap() method twice on the children element.
$('.content .post-12')
// get children elements, or use contents()
.children()
// use unwrap twice to unwrap two parents
.unwrap().unwrap()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
<div class="post-12">
<h2>subtitle</h2>
<p>content</p>
</div>
</div>
UPDATE : With the updated content you just need to change the selector with your requirement.
$('div > div > h2,div > div > p').unwrap().unwrap()
// or use
// $('div > div:has(h2):has(p) > *')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="whatever_name">
<div class="whatever_name">
<div class="whatever_name">
<h2>subtitle</h2>
<p>content
<p>
</div>
</div>
</div>
I am looking for jQuery slector that will find all descendants of passed jQuery object that are not nested in any element that fits same selector. Consider following HTML:
<body>
<div class="container" id="1">
<div class="container" id="11"></div>
<div class="container" id="12"></div>
</div>
<div class="container" id="2"></div>
<div class="noncontainer">
<div class="container" id="3">
<div class="container" id="31"></div>
</div>
</div>
</body>
In this example $("body").find(".container magicSelector") should return divs 1, 2 and 3. $("#1").find(".container magicSelector") should return divs 11 and 12.
EDIT: I have wrote a function for that here, but I think that selector would be cleaner and faster.
Use not() for first case
$("body").find(".container").not('.container .container');
And for second use descendent in the selector
$("body").find('.container .container');
This is a sample code of my scenario. I have some elements that are loading inside a container div using PHP from a MYSQL table.
<div id="itemContainer">
<div class="item">
test
</div>
<div class="item">
test
</div>
<div class="item">
test
</div>
<div class="item">
test
</div>
<div class="item">
test
</div>
<div class="item">
test
</div>
</div>
so their may be 10 or 12 items but I need only 4 items to be display at once. so I tried to select all the items after the fourth item. The way I tried has some problems so I need your help.
$(document).ready(function() {
var items = $('#weekly_best_selling').children('.itemContainer').length;
if (items > 6) {
$('#weekly_best_selling').children('.itemContainer').nextAll('.itemContainer').css( "background-color", "red" );
}
});
http://jsfiddle.net/yasithao3/j2zyhmr3/
you can use :gt selector to target elements having index greater than the one passed as argument in it. also note that :gt selector has 0 based index. Use:
$('#itemContainer .item:gt(3)').hide();//hide items having index greater than 3
Working Demo
$('.item:gt(3)').hide()
Use jQuery's :gt() selector.
I've got this code below, with different data, repeated over 10 times on the page I am working on:
HTML:
<div class="kpaGraph">
<p>Target: 43%</p>
<div class="progress">
<div class="bar"></div>
</div>
</div>
<div class="kpaBottom">
<div class="strong">
<p>311</p>
</div>
<div class="weak">
<p>number of teachers trained</p>
</div>
</div>
I want to alter the number in div.strong p (311) based on the number in div.kpaGraph p (43%) in the same manner across all instances of this code with Javascript/ jQuery. What is the cleanest way to do this? Should I select all $('div.kpaGraph p') and then use each() Or should I create a function and run it on all of them?
Thanks!
You can use the following to find the proper element in conjuntion with an .each() on $('div.kpaGraph p'):
$(this).parent().next('div.kpaBottom').find('div.strong p')
For example, using the following will take the value in the kpaGraph p node and append it to the p node in the following kpaBottom node:
$('div.kpaGraph p').each(function () {
$(this).parent().next('div.kpaBottom').find('div.strong p').html('foo');
});
jsFiddle example
There are a few ways.
You can use "next".
$('.kpaGraph').each(function(){
var $kpaStrong = $(this).next('.kpaBottom .strong p');//this is the elm that has 311
});
Or you have to somehow create a relation between them so you know they go together, like a common parent.
<div class="kpaWr">
<div class="kpaGraph">
<p>Target: 43%</p>
<div class="progress">
<div class="bar"></div>
</div>
</div>
<div class="kpaBottom">
<div class="strong">
<p>311</p>
</div>
<div class="weak">
<p>number of teachers trained</p>
</div>
</div>
</div>
Then with jQuery you can select it like so:
$('.kpaGraph').each(function(){
var $kpaStrong = $(this).closest('.kpaWr').find('.kpaBottom .strong p');//this is the elm that has 311
});
Something like this might be pretty clean too:
$("div.strong p").text(function(index, text){
return $(this).closest("div.kpaBottom").prev("div.kpaGraph").find("p").text();
});
That would change the text to Target: 43% in your example.
I want to retrieve the class name of the last child element (class last div new3) in .find_class, but my code gives me class select3. How can I fix it?
Demo: http://jsfiddle.net/gBxan/5/
<div class="find_class mediumCell">
<div class="new1 old1">
<div class="select1"></div>
</div>
<div class="new2 old2">
<div class="select2"></div>
</div>
<div class="new3 old3"><!-- I want to get this div's class name 'new3' -->
<div class="select3"></div>
</div>
</div>
var find = $('div.find_class div:last').attr('class');
alert(find);
Use the child selector (>):
var find = $('div.find_class > div:last').attr('class');
Fiddle: http://jsfiddle.net/gBxan/6/
See also: MDN - CSS Selectors
$('.find_class').children(':last').attr('class');