时间戳

首页 > 解决方案 > 计算父子子节点

javascript - 计算父子子节点

问题描述

所以我想知道如何计算父母子女子女的人数，例如：

const parent = document.querySelectorAll('.parent');
parent.forEach(el => {
  const ul = el.querySelector('.child3-child');
  const div = document.createElement('div');
  div.textContent = ul.childNodes.length;
  el.append(div);
});
<div class="parent">
  <div class="child1">
   text
  </div>
  <div class="child2">
   text
  </div>
  <div class="child3">
    <ul class="child3-child">
     <li>
      some text...
     </li>
    <ul>
  </div>
</div>

现在我想计算有多少<ul class="child3-child">子元素在这种情况下它只有 1 li。

标签： javascripthtml

解决方案

  • 使用children而不是childNodes. 前者包括 HTML 元素，而后者包括文本节点。
  • 正确关闭您的</ul>标签，否则浏览器会认为它正在打开一个嵌套元素。

const parent = document.querySelectorAll('.parent');
parent.forEach(el => {
  const ul = el.querySelector('.child3-child');
  const div = document.createElement('div');
  div.textContent = ul.children.length;
  el.append(div);
});
<div class="parent">
  <div class="child1">
   text
  </div>
  <div class="child2">
   text
  </div>
  <div class="child3">
    <ul class="child3-child">
     <li>
      some text...
     </li>
    </ul> <!--- This wasn't properly closed -->
  </div>
</div>

推荐阅读