使用jQuery计算立即子div元素

Question

我有以下HTML节点结构：

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

如何计算 f 的直接子节点数，类型为 div ？在上面的例子中，结果应该是两个（ bar 和 baz ）。

Answer 1

$("#foo > div").length

使用id为'foo'的元素的子元素为div。然后检索生成的包装集的大小。

Answer 2

我建议使用 $（'＃foo'）。children（）。size（）以获得更好的性能。

我已经创建了一个 jsperf 测试来查看速度差异和 children（）方法击败了儿童选择器（#foo＆gt; div）方法至少 60％在Chrome（canary build v15）中 20-30％在Firefox中（v4 ）。

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

[更新]我已经更新了测试以包含size（）vs长度测试，并且它们没有太大区别（结果： length 使用率略高于（2％） <代码>大小（））

[更新]由于OP中看到的标记不正确（在我更新'标记验证'之前）， $（＆quot; #foo＆gt; div＆quot;）。length ＆安培; $（'＃foo'）。children（）。length 的结果相同（ jsfiddle ）。但是为了获得正确的答案只能得到'div'的孩子，一个人应该使用儿童选择器来正确和更好的表现

Answer 3

$("#foo > div") 

选择所有作为#foo
的直接后代的div 一旦你拥有了一组孩子，你可以使用尺寸函数：

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

或者您可以使用

$("#foo > div").length

两者都会返回相同的结果

Answer 4

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

Answer 5

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

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

您可以在此处尝试测试： http://jsperf.com/jquery-child -ele尺寸/ 7

此方法获得46,095 op / s，而其他方法最佳获得2000 op / s

Answer 6

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

Answer 7

$("#foo > div").length

jQuery有一个.size（）函数，该函数将返回元素出现的次数，但是，如jQuery文档中所指定的，它更慢并且返回与.length属性相同的值，因此最好简单使用.length属性。 从这里： http://www.electrictoolbox.com/get-total -number匹配元素-的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“P.C”。 我的页面遇到了类似的问题。
现在，只需省略＆gt;它应该工作正常。

Answer 10

使用最新版本的jquery，您可以使用 $（＆quot; #superpics div＆quot;）。children（）。length 。

Answer 11

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