Question

Does anyone know how to count just the first level children of an element from inside a .each() loop?

For example, I have several lists on my page, like so …

<ul>
    <li><a href="#">item1</a></li>
    <li><a href="#">item2</a></li>
    <li><a href="#">item3</a></li>
    <li><a href="#">item4</a></li>
</ul>
<ul>
    <li><a href="#">item1</a></li>
    <li><a href="#">item2</a></li>
    <li><a href="#">item3</a></li>
    <li><a href="#">item4</a></li>
    <li><a href="#">item5</a></li>
    <li><a href="#">item6</a></li>
</ul>
<ul>
    <li><a href="#">item1</a></li>
    <li><a href="#">item2</a></li>
    <li><a href="#">item3</a></li>
</ul>

I’m trying to loop through each list and determine how many list items it has, except using jQuery .size() is counting the tags as elements too. I just need to know how many list items exist.

Additionally, I’m not sure how to do this because using something like jQuery(‘ul > li’).size() isn’t accessible from within the .each() loop, because I’m referencing each different with jQuery(this). Is there a way to do something like jQuery(this ‘ > li’)? Cause that’s not working for me either 🙂

here’s what i’ve been trying, but I’m not having any luck:

jQuery('ul').each(function() {
    var count = jQuery(this).find('li').size();
    alert(count);
});

Answer 1

you can use length property:

$('ul').each(function() {
    var count = $(this).find('li').length;
    alert(count);
});

or if you want to select immediate children li tags, you can try:

$('ul').each(function() {
    var count = $('> li', this).length;
    alert(count);
});