使用 jQuery 计算直接子 div 元素答案

【问题标题】：Count immediate child div elements using jQuery使用 jQuery 计算直接子 div 元素
【发布时间】：2010-09-20 00:35:17
【问题描述】：

我有以下 HTML 节点结构：

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

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

【问题讨论】：

我添加了一个 jsperf 测试来查看不同方法之间的速度差异。请看下面我的回答

标签： javascript jquery dom jquery-selectors

【解决方案1】：

$("#foo > div").length

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

【讨论】：

周五我只是想知道如何使用 jQuery 计算表列数。我将不得不尝试类似的方法：$('#table > th').size()。
有时这不起作用，您必须使用 $('#foo').children().size() 无论如何根据@mrCoder 更快
如果我想用这个而不是#foo 那么。如何使用这个？
@472084 如果你这样做，它也会计算“span”元素。请注意问题如何指定他只想计算“div”元素，而不是所有元素。

【解决方案2】：

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

我创建了一个 jsperf 测试来查看速度差异，children() 方法在 Chrome（canary在 Firefox (v4) 中构建 v15) 20-30%。

顺便说一句，不用说，这两种方法产生相同的结果（在本例中为 1000）。

[更新] 我更新了测试以包括 size() 与长度测试，它们并没有太大区别（结果：length 的使用比size() 稍快（2%））

[更新] 由于在 OP 中看到的标记不正确（在我进行“标记验证”更新之前），$("#foo > div").length 和 $('#foo').children().length 的结果相同（jsfiddle）。但是为了得到正确的答案，只得到 'div' 孩子，一个应该使用孩子选择器以获得正确和更好的性能

【讨论】：

虽然这个问题是在某个时候被问到的，但只是想分享一下，以便从现在开始对某人有所帮助
那里只过滤 'div' 孩子？
.length 实际上是首选方法，因为它没有函数调用的开销。
是的，子选择器是正确的，因为它使用了原生的 CSS 选择器，所以选择是用 C++ 而不是 JavaScript 编写的…… 性能差异很大。这个答案更容易理解，但速度要慢很多。
@manikanta 嘿，非常详细的分析器。不好意思打扰了，一个问题。如果我喜欢$('#extraLinks').children().size() 来计算 div 中的文本框（名为 extraLinks），为什么当它们只有 2 个时我会得到4。一般来说，我得到的长度乘以 2...知道为什么吗？谢谢

【解决方案3】：

$("#foo > div")

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

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

或者你可以使用

$("#foo > div").length

两者都会返回相同的结果

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案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

【讨论】：

OP 只要求 div 子元素

【解决方案6】：

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

【讨论】：

【解决方案7】：

$("#foo > div").length

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

【讨论】：

【解决方案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>

【讨论】：

【解决方案9】：

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

【讨论】：

【解决方案10】：

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

或

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

如前所述，两者都返回相同的结果。
但是 size() 函数更像是 jQuery "P.C"。
我的页面也有类似的问题。
现在，只需省略 >，它应该可以正常工作。

【讨论】：

后代选择器将返回该元素的所有后代，包括子、孙、曾孙等，而不仅仅是直系子
更多 jQuery "PC"。是什么意思？

【解决方案11】：

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

【讨论】：

算上所有 div后代，不仅仅是孩子。

【解决方案12】：

对 div 类型的直接子元素试试这个

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

【讨论】：