jQuery count child elements

Question

<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])?

http://stackoverflow.com/questions/250688/count-immediate-child-div-elements-using-jquery — onder, Nov 27 '10 at 10:25
In pure JS, @Mo.'s answer is kind of low still, but use `element.childelementCount` — Charles L., Feb 07 '19 at 19:23

score 670 · Accepted Answer · answered Nov 27 '10 at 10:25

670

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;

answered Nov 27 '10 at 10:25

Nick Craver

score 38 · Answer 2 · answered Nov 27 '10 at 10:27

38

$("#selected > ul > li").size()

or:

$("#selected > ul > li").length

answered Nov 27 '10 at 10:27

bcosca

14

Just a note .size() has been deprecated in favor of .length – Eric Kigathi Mar 18 '14 at 23:45
2

So it's the length that counts, not the size. ;) – CJWEB Mar 02 '22 at 06:00
@CJWEB: you are saying that `size` does no longer matter? – Ingmar Jul 05 '23 at 07:54

score 18 · Answer 3 · answered Nov 27 '10 at 10:26

18

fastest one:

$("div#selected ul li").length

answered Nov 27 '10 at 10:26

Ali Tarhini

2

This is not the fastest, in fact you slowed it down by adding `div` on there :) – Nick Craver Nov 27 '10 at 10:28
1

It really depends on which browser you use. In many modern browsers, adding the element uses findByElement before finding by id or class, which is slower. Soon this will be a moot point either way though, because all DOM searches will be done using one native function. In any case, a simple getElementById('selected') or $('#selected') would be faster at this point. – Alex K Dec 10 '12 at 19:45

score 16 · Answer 4 · answered Jun 26 '13 at 10:09

16

You can use JavaScript (don't need jQuery)

document.querySelectorAll('#selected li').length;

answered Jun 26 '13 at 10:09

score 16 · Answer 5 · answered Nov 27 '10 at 10:24

16

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.

answered Nov 27 '10 at 10:24

Felix Kling

score 12 · Answer 6 · answered Nov 27 '10 at 10:26

12

$('#selected ul').children().length;

or even better

 $('#selected li').length;

answered Nov 27 '10 at 10:26

Martin Algesten

score 5 · Answer 7 · answered Nov 03 '15 at 07:35

It is simply possible with childElementCount in pure javascript

var countItems = document.getElementsByTagName("ul")[0].childElementCount;
console.log(countItems);

<div id="selected">
  <ul>
    <li>29</li>
    <li>16</li>
    <li>5</li>
    <li>8</li>
    <li>10</li>
    <li>7</li>
  </ul>
</div>

score 3 · Answer 8 · answered Apr 25 '19 at 10:33

3

pure js

selected.children[0].children.length;

let num = selected.children[0].children.length;

console.log(num);

<div id="selected">
  <ul>
    <li>29</li>
    <li>16</li>
    <li>5</li>
    <li>8</li>
    <li>10</li>
    <li>7</li>
  </ul>
</div>

answered Apr 25 '19 at 10:33

8 Answers8