Count immediate child div elements using jQuery

Question

I have the following HTML node structure:

<div id="foo">
  <div id="bar"></div>
  <div id="baz">
    <div id="biz"></div>
  </div>
  <span></span>
</div>

How do I count the number of immediate children of foo, that are of type div? In the example above, the result should be two (bar and baz).

I've added a jsperf test to see the speed difference between different approaches. see my answer below — manikanta, Aug 16 '11 at 20:15

Garry Shutler · Accepted Answer · 2014-02-11T09:54:40.043

359

$("#foo > div").length

Direct children of the element with the id 'foo' which are divs. Then retrieving the size of the wrapped set produced.

edited Feb 11 '14 at 09:54

answered Oct 30 '08 at 15:49

Garry Shutler

32,260
12
84
119

1

I was just wondering on Friday how to count table columns with jQuery. I'll have to try a similar approach: `$('#table > th').size()`. – Joseph Yaduvanshi Dec 20 '09 at 22:16
1

Sometimes this does not work and you have to use $('#foo').children().size() which is faster anyway according to @mrCoder – 472084 Sep 22 '11 at 09:45
If i want to use this instead of #foo then.How to use this? – Mukesh Apr 22 '13 at 08:56
@472084 If you do it that way, it would count the "span" element too. Notice how the question specifies he wants to count only the "div" elements, not all elements. – Angel Blanco Mar 05 '14 at 11:55

manikanta · Answer 2 · 2012-09-05T00:02:21.653

68

I recommend using $('#foo').children().size() for better performance.

I've created a jsperf test to see the speed difference and the children() method beaten the child selector (#foo > div) approach by at least 60% in Chrome (canary build v15) 20-30% in Firefox (v4).

By the way, needless to say, these two approaches produce same results (in this case, 1000).

[Update] I've updated the test to include the size() vs length test, and they doesn't make much difference (result: length usage is slightly faster (2%) than size())

[Update] Due to the incorrect markup seen in the OP (before 'markup validated' update by me), both $("#foo > div").length & $('#foo').children().length resulted the same (jsfiddle). But for correct answer to get ONLY 'div' children, one SHOULD use child selector for correct & better performance

edited Sep 05 '12 at 00:02

answered Aug 16 '11 at 20:13

manikanta

8,100
5
59
66

though this question is asked sometime back, just wanted to share so that this could help someone from now – manikanta Aug 16 '11 at 20:14
Where is filtering only 'div' children there? – Andrey Tserkus Aug 16 '11 at 21:00
2

`.length` is in fact the preferred method because it does not have the overhead of a function call. – Nic Aitch Sep 13 '11 at 01:44
Yea, the child selector is correct because it uses native CSS selectors, so the selection is written in C++ rather than JavaScript... Quite a performance difference. This answer is easier to understand but a lot slower. – mdenton8 Sep 06 '13 at 22:17
@manikanta Hey , very detailed anser. Sorry to bother, one question. If I do like `$('#extraLinks').children().size()` to count text boxes in a div (named extraLinks) why I get `4` when they are only 2. In general, I get the length multiplied with 2...Any idea why? Thanks – slevin Oct 14 '13 at 22:56

score 26 · Answer 3 · answered Oct 31 '08 at 01:22

26

$("#foo > div")

selects all divs that are immediate descendants of #foo
once you have the set of children you can either use the size function:

$("#foo > div").size()

or you can use

$("#foo > div").length

Both will return you the same result

answered Oct 31 '08 at 01:22

Darko

38,310
15
80
107

score 19 · Answer 4 · answered Oct 23 '13 at 10:22

19

$('#foo').children('div').length

answered Oct 23 '13 at 10:22

Abdennour TOUMI

87,526
38
249
254

score 8 · Answer 5 · answered Sep 09 '11 at 16:50

8

In response to mrCoders answer using jsperf why not just use the dom node ?

var $foo = $('#foo');
var count = $foo[0].childElementCount

You can try the test here: http://jsperf.com/jquery-child-ele-size/7

This method gets 46,095 op/s while the other methods at best 2000 op/s

answered Sep 09 '11 at 16:50

HaxElit

3,983
7
34
43

2

The OP asked for only div child elements – dj18 Mar 28 '12 at 15:37

score 6 · Answer 6 · answered Oct 30 '08 at 15:51

6

$('#foo > div').size()

answered Oct 30 '08 at 15:51

gizmo

11,819
6
44
61

score 5 · Answer 7 · answered Mar 19 '13 at 22:04

5

var divss = 0;
$(function(){
   $("#foo div").each(function(){
    divss++;

   });
   console.log(divss);  
});     
<div id="foo">
  <div id="bar" class="1"></div>
  <div id="baz" class="1"></div>
  <div id="bam" class="1"></div>
</div>

answered Mar 19 '13 at 22:04

John Alvarez

51
1
2

score 5 · Answer 8 · answered Dec 05 '10 at 12:50

$("#foo > div").length

jQuery has a .size() function which will return the number of times that an element appears but, as specified in the jQuery documentation, it is slower and returns the same value as the .length property so it is best to simply use the .length property. From here: http://www.electrictoolbox.com/get-total-number-matched-elements-jquery/

score 4 · Answer 9 · edited Oct 12 '12 at 17:47

4

With the most recent version of jquery, you can use $("#superpics div").children().length.

edited Oct 12 '12 at 17:47

Ryan Kohn

13,079
14
56
81

answered Oct 12 '12 at 17:38

Kent Thomas

41
1

score 2 · Answer 10 · edited Mar 28 '12 at 15:27

2

var n_numTabs = $("#superpics div").size();

or

var n_numTabs = $("#superpics div").length;

As was already said, both return the same result.
But the size() function is more jQuery "P.C".
I had a similar problem with my page.
For now on, just omit the > and it should work fine.

edited Mar 28 '12 at 15:27

Barry Kaye

7,682
6
42
64

answered Dec 20 '09 at 22:11

Andrew Perkins

29
1

Descendant Selector will returns all the descendants of #superpics, including child, grandchild, great-grandchild, and so on, of that element, not just immediate children – manikanta Sep 05 '12 at 00:06
more jQuery "P.C". means ? – Ghanshyam Lakhani Sep 23 '15 at 09:19

score 1 · Answer 11 · edited Mar 28 '12 at 15:26

1

$("div", "#superpics").size();

edited Mar 28 '12 at 15:26

Barry Kaye

7,682
6
42
64

answered Dec 13 '10 at 14:29

Alexandros Ioannou

21
1

1

That counts **all** `div` descendants, not only the children. – Felix Kling Dec 04 '11 at 13:58

score -1 · Answer 12 · answered Oct 03 '19 at 07:50

-1

Try this for immediate child elements of type div

$("#foo > div")[0].children.length

answered Oct 03 '19 at 07:50

talent makhanya

11
1

Count immediate child div elements using jQuery

12 Answers12

Linked