Прокрутите родительские DIV и выберите определенных детей

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';
    });
});