jQuery count child elements
<div id="selected">
<ul>
<li>29</li>
<li>16</li>
<li>5</li>
<li>8</li>
<li>10</li>
<li>7</li>
</ul>
</div>
I want to count the total number of <li>
elements in <div id="selected"></div>
. How is that possible using jQuery's .children([selector])
?
You can use .length
with just a descendant selector, like this:
var count = $("#selected li").length;
If you have to use .children()
, then it's like this:
var count = $("#selected ul").children().length;
You can test both versions here.
$("#selected > ul > li").size()
or:
$("#selected > ul > li").length
fastest one:
$("div#selected ul li").length
var length = $('#selected ul').children('li').length
// or the same:
var length = $('#selected ul > li').length
You probably could also omit li
in the children's selector.
See .length
.
You can use JavaScript (don't need jQuery)
document.querySelectorAll('#selected li').length;