使用 jQuery 对直接子 div 元素进行计数

javascript dom jquery jquery-selectors

2022-08-30 01:37:57

我有以下HTML节点结构：

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

如何计算类型的直系子项的数量？在上面的示例中，结果应为 2（和）。foodivbarbaz

答案 1

$("#foo > div").length

id为“foo”的元素的直接子级，它们是div。然后检索生成的包装集的大小。

答案 2

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

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

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

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

[更新]由于在OP中看到不正确的标记（在我更新“标记验证”之前），$（“#foo > div”）.length和$（'#foo'）.children（）.length都产生了相同的结果（jsfiddle）。但是，对于正确答案，只得到“div”子级，应该使用子级选择器来获得正确和更好的性能