Question

我有以下HTML节点结构：

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

如何计算foo类型div的直接子女数量？在上面的示例中，结果应为两个（bar和baz）。

Answer 1

$("#foo > div").length

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

Answer 2

我建议使用$('#foo').children().size()以获得更好的效果。

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

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

[更新]我已经更新了测试以包含size（）和长度测试，并且它们没有太大区别（结果：length使用率比{{1}略快（2％） }}）

[更新]由于OP中看到的标记不正确（在我更新“标记验证”之前），size()＆amp; $("#foo > div").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-size/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-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“P.C”。我的页面遇到了类似的问题。
现在，只省略＆gt;它应该工作正常。

Answer 10

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

Answer 11

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

Answer 12

对于div类型的直接子元素尝试此操作

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

使用jQuery计算立即子div元素

12 个答案: