Question

我是javascript的新手，我试图计算每个div有多少段作为直接孩子。

示例：

<div id="1">
    <p>text</p>
    <p>text</p>
    <div id="2">
        <p>text</p>
    </div>
</div>
<div id="3">
    <p>text</p>
    <p>text</p>
    <p>text</p>
</div>

我正在寻找的结果：

div 1 = 2
div 2 = 1
div 3 = 3

到目前为止，我得到的代码如下所示：

var divs = document.getElementsByTagName('div');
for(var i = 0; i < divs.length; i++){
    var count = divs[i].getElementsByTagName('p').childElementCount;
    console.log('div ' + i + ' count ' + count);
}

结果：

Console log

为什么我会“未定义”？尝试使用.length而不是.childElementCount，但这也没有给我想要的结果。

为自己找到解决方案的努力，jquery不是一个选择。

Answer 1

<强>首先

getElementsByTagName返回类似数组的结构（HTMLCollection）。您可以通过.length获取列表的长度。

您只能在DOM对象上使用childElementCount，而不能在集合上使用。

<强>第二

getElementsByTagName将返回所有后代，而不仅仅是直接的孩子。之前在stackoverflow here上提出了解决方案。如果您觉得答案有用，请不要忘记在那里投票。

更有效率，我建议只搜索孩子们的div标签：

for(var i = 0; i < divs.length; i++){
    var children = divs[i].children,
        divCount = 0;
    for(var childIndex = 0; childIndex < children.length; childIndex++)
        if(children[childIndex].tagName == 'DIV')
            divCount++;

    console.log('div ' + i + ' count ' + divCount);
}

或者更加讨厌它并使用.reduce()和reduce函数。

Answer 2

希望这有帮助

＆＃13;

let divs = document.getElementsByTagName('div')

Array.prototype.slice.call(divs).map(div => {
  let count = 0;
  Array.prototype.slice.call(div.getElementsByTagName('p')).forEach(p => {
    if (p.parentNode == div) {
      count++;
    }
  })
  console.log('div ', div.id, " = ", count)
})

＆＃13;

<body>
  <div id="1">
    <p>text</p>
    <p>text</p>
    <div id="2">
        <p>text</p>
    </div>
  </div>
  <div id="3">
      <p>text</p>
      <p>text</p>
      <p>text</p>
  </div>
</body>

＆＃13;

Answer 3

var divs = document.getElementsByTagName('div');
for (var i = 0; i < divs.length; i++) {
  var count = divs[i].querySelectorAll(':scope > p').length;
  console.log('div ' + i + ' count ' + count);
}

<div id="1">
  <p>text</p>
  <p>text</p>
  <div id="2">
    <p>text</p>
  </div>
</div>
<div id="3">
  <p>text</p>
  <p>text</p>
  <p>text</p>
</div>

:scope表示父元素本身。 >表示选择直接/直接子女。

查看当前如何支持:scope伪类here。不支持IE，但有shim可用。

从div中获取特定类型的直接子女的数量

3 个答案: