Count immediate child div elements using jQuery

Don_2648 0
Viewed 300524

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

jquery-selectors dom jquery javascript
12 Answers
$("#foo > div").length

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

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

Darko_Z_329430 
$('#foo > div').size()
gizmo_93960 
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_2356690 
$("div", "#superpics").size();
user_5406280

Try this for immediate child elements of type div

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