Count immediate child div elements using jQuery

Count immediate child div elements using jQuery

I have the following HTML node structure:

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).


Solution 1:

$("#foo > div").length

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

Solution 2:

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

Solution 3:

$("#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

Related:  Match two fields with jQuery validate plugin

Solution 4:


Solution 5:

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:

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

Solution 6:

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