Count immediate child div elements using jQuery

Question

I have the following HTML node structure    lt div id  foo  gt     lt div id  bar  gt  lt  div gt     lt div id  baz  gt       lt div id  biz  gt  lt  div gt     lt  div gt     lt span gt  lt  span gt   lt  div gt    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

User · Answer

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

User · Answer

foo  gt  div   length   Direct children of the element with the id  foo  which are divs  Then retrieving the size of the wrapped set produced

User · Answer

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

User · Answer

With the most recent version of jquery  you can use     superpics div   children   length

User · Answer

var divss   0    function           foo div   each function        divss               console log divss               lt div id  foo  gt     lt div id  bar  class  1  gt  lt  div gt     lt div id  baz  class  1  gt  lt  div gt     lt div id  bam  class  1  gt  lt  div gt   lt  div gt

User · Answer

foo   children  div   length

User · Answer

div     superpics   size

User · Answer

Try this for immediate child elements of type div      foo  gt  div   0  children length

User · Answer

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  gt  div   length  amp      foo   children   length resulted the same  jsfiddle   But for correct answer to get ONLY  div  children  one SHOULD use child selector for correct  amp  better performance

User · Answer

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

User · Answer

foo   children  div   length

User · Answer

foo  gt  div   size

User · Answer

div     superpics   size

User · Answer

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

User · Answer

foo  gt  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  gt  div   size     or you can use       foo  gt  div   length   Both will return you the same result

User · Answer

foo  gt  div   size

User · Answer

foo  gt  div   length   Direct children of the element with the id  foo  which are divs  Then retrieving the size of the wrapped set produced

User · Answer

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  gt  div   length  amp      foo   children   length resulted the same  jsfiddle   But for correct answer to get ONLY  div  children  one SHOULD use child selector for correct  amp  better performance

User · Answer

var divss   0    function           foo div   each function        divss               console log divss               lt div id  foo  gt     lt div id  bar  class  1  gt  lt  div gt     lt div id  baz  class  1  gt  lt  div gt     lt div id  bam  class  1  gt  lt  div gt   lt  div gt

User · Answer

foo  gt  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  gt  div   size     or you can use       foo  gt  div   length   Both will return you the same result

User · Answer

With the most recent version of jquery  you can use     superpics div   children   length

User · Answer

foo  gt  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

User · Answer

foo  gt  div   size

User · Answer

foo  gt  div   length   Direct children of the element with the id  foo  which are divs  Then retrieving the size of the wrapped set produced

User · Answer

Try this for immediate child elements of type div      foo  gt  div   0  children length

User · Answer

foo  gt  div   length   Direct children of the element with the id  foo  which are divs  Then retrieving the size of the wrapped set produced

User · Answer

foo  gt  div   size

User · Answer

foo  gt  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  gt  div   size     or you can use       foo  gt  div   length   Both will return you the same result

User · Answer

foo  gt  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

User · Answer

foo  gt  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  gt  div   size     or you can use       foo  gt  div   length   Both will return you the same result

[javascript] Count immediate child div elements using jQuery

Examples related to javascript

Examples related to jquery

Examples related to dom

Examples related to jquery-selectors