使用 jQuery 计算直接子 div 元素

IT技术 javascript jquery dom jquery-selectors
2021-03-15 22:56:09

我有以下 HTML 节点结构：

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

如何计算的直接孩子的数量foo，并且是类型的div？在上面的例子中，结果应该是两个 (bar和baz)。

6个回答
$("#foo > div").length

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

有时这不起作用，你必须使用 $('#foo').children().size() 根据@mrCoder 无论如何它更快
2021-04-21 22:56:09
@472084 如果你这样做，它也会计算“跨度”元素。请注意问题如何指定他只想计算“div”元素，而不是所有元素。
2021-04-26 22:56:09
如果我想使用它而不是 #foo then.How 使用它？
2021-05-09 22:56:09
星期五我只是想知道如何使用 jQuery 计算表列。我要尝试类似的做法：$('#table > th').size()。
2021-05-13 22:56:09

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

我创建了一个jsperf测试来查看速度差异，并且该children()方法在 Chrome（金丝雀版本 v15）中击败子选择器（#foo > div）方法至少60%（在 Firefox（v4）中为20-30%）。

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

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

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

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


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

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

或者你可以使用 

$("#foo > div").length

两者都会返回相同的结果

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

为了回应使用 jsperf 的 mrCoders 答案，为什么不直接使用 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 子元素
2021-04-30 22:56:09
其它你可能感兴趣的问题
上一篇Chrome 扩展程序中的弹出窗口 下一篇jQuery 获取元素相对于窗口的位置