Question

我试图遍历以下HTML结构并选择所有子元素。一旦选择了那些元素，我想对它们应用动态样式值，或将它们设置为变量。我简单的JavaScript循环位于HTML下方。

<div class="module">
    <h2>Heading></h2>
    <p>Paragraph content</p>
    <p>Paragraph content</p>
</div>
<div class="module">
    <h2>Heading</h2>
    <p>Paragraph content</p>
    <p>Paragraph content</p>
</div>

(function() {
  let x = document.querySelectorAll('.module');
  let p = document.querySelectorAll('p');

  for(i = 0; i < p.length; i++) {
  }
}());

我已经看到一些使用this.parentNode.children[i].style.display = 'none';的示例，但是我无法弄清楚它在示例中如何工作。

建议？

干杯

Answer 1

您可以使用CSS >运算符选择子项：

let ps = document.querySelectorAll('.module > p');
ps.forEach(function (p) {
    p.style.display = 'none';
});

如果您喜欢双循环，或者需要在其父级中每个p的序列号：

let modules = document.querySelectorAll('.module');
modules.forEach(function (module) {
    let ps = module.querySelectorAll('p');
    ps.forEach(function (p, i) {
        if (i == 0) { /* do something for first child p */ }
        p.style.display = 'none';
    });
});

循环浏览父级DIV并选择某些子级

1 个答案: