使用jQuery计算直接的子div元素

我有以下的HTML节点结构：

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

我如何计算foo的直接子types，这是divtypes的？ 在上面的例子中，结果应该是两个（ bar和baz ）。

Answer 1

 $("#foo > div").length 

元素的直接孩子与id'foo'是divs。 然后检索生成的包装的大小。

Answer 2

我build议使用$('#foo').children().size()来获得更好的性能。

我已经创build了一个jsperftesting来查看速度差异，并且在Firefox（v4）中， children()方法在Chrome（canary build v15）中击败了子select器（#foo> div）至less60％ 20-30％ 。

顺便说一下，不用说，这两种方法产生相同的结果（在这种情况下，1000）。

[更新]我已经更新了testing，以包括size（）与长度testing，并没有太大的区别（结果： length使用速度稍快（2％）比size() ）

[更新]由于在OP中看到不正确的标记（在我进行'标记validation'更新之前），所以$("#foo > div").length ＆ $('#foo').children().length相同（ jsfiddle ）。 但是为了得到唯一的'div'儿童的正确答案，一个应该使用儿童select器来获得正确和更好的performance

Answer 3

 $("#foo > div") 

select#foo的直接后代的所有div
一旦你有了一组孩子，你可以使用size函数：

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

或者你可以使用

 $("#foo > div").length 

两者都会返回相同的结果

Answer 4

为了响应mrCoders回答使用jsperf为什么不只是使用DOM节点？

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

你可以试试这里的testing： http : //jsperf.com/jquery-child-ele-size/7

这个方法获得了46,095个op / s，而其他方法最多为2000个op / s

Answer 5

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

Answer 6

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

Answer 7

 $("#foo > div").length 

jQuery有一个.size（）函数，它将返回一个元素出现的次数，但是，如jQuery文档中指定的那样，它比较慢，返回与.length属性相同的值，所以最好简单地使用。长度属性。 从这里： http : //www.electrictoolbox.com/get-total-number-matched-elements-jquery/

Answer 8

 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> 

Answer 9

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

要么

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

---

如前所述，两者都返回相同的结果。
但size（）函数更多的是jQuery“PC”。
我的页面也有类似的问题。
现在，只要省略>，它应该工作正常。

Answer 10

使用最新版本的jquery，可以使用$("#superpics div").children().length 。

Answer 11

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