jquery count first level elements from within .each() loop

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);
});

What's the number you want to get from your example? 13? Or 4, 6, 3? — yunzen
– yunzen, Commented Jul 26, 2012 at 20:24
I would think $('ul>li').length would do it - although if you have any nested ul, it would count those as well. Is that the problem? — kinakuta
– kinakuta, Commented Jul 26, 2012 at 20:25
Just FYI, from the jQuery Documentation: The .size() method is functionally equivalent to the .length property; however, the .length property is preferred because it does not have the overhead of a function call. — MrOBrian
– MrOBrian, Commented Jul 26, 2012 at 20:26

Ram · Accepted Answer · 2012-07-26 20:28:24Z

2

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);
});

edited Jul 26, 2012 at 20:28

answered Jul 26, 2012 at 20:23

Ram

145k16 gold badges174 silver badges201 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

lbstr Over a year ago

+1 Yup, this will do it. Another good tip for the OP'er is that .length is an easy way to check if an element exists. For example, if($('#somediv').length){ ... }

sabithpocker · Accepted Answer · 2012-07-26 20:26:11Z

0

'>' immediateChild selector

you can use $('> li') when using $(this).find() or alterbatively do,

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

answered Jul 26, 2012 at 20:26

sabithpocker

15.6k1 gold badge44 silver badges78 bronze badges

Comments

Fury · Accepted Answer · 2014-01-21 10:53:03Z

0

try this. I think it's much better.

var rt = 0;
$('ul').each(function() {
    rt++;    
});

alert(rt);

answered Jan 21, 2014 at 10:53

Fury

4,7867 gold badges54 silver badges83 bronze badges

Collectives™ on Stack Overflow

jquery count first level elements from within .each() loop

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related