遍历 javascript 数组以检查每个项目的某些子元素

Question

我正在尝试遍历网页并根据 class 'award-winner' 元素中带有 class 'award-winner-wrapper' 的子元素的数量更改某些样式。目前，我已经能够使用它检查网页的父元素。

<div class="award-winner-wrapper">
    <h2>Heading></h2>
    <p>Paragraph content</p>
    <p>Paragraph content</p>
    <div class="award-winner'></div>
</div>

<div class="award-winner-wrapper">
    <h2>Heading></h2>
    <p>Paragraph content</p>
    <p>Paragraph content</p>
    <div class="award-winner'></div>
</div>

<div class="award-winner-wrapper">
    <h2>Heading></h2>
    <p>Paragraph content</p>
    <p>Paragraph content</p>
    <div class="award-winner'></div>
    <div class="award-winner'></div>
</div>

let parents = document.querySelectorAll('.award-winner-wrapper');
let pArray = Array.from(parents)

我遇到的问题是使用 foreach 循环检查 'award-winner' class 的每个数组项，如果有 2 个或更多元素 class 更改一些样式。

Answer 1

只需遍历您的 parents NodeList（此处使用 NodeList.forEach()) and query the parent for relevant children here with querySelectorAll() and adding a class with classList.add()

let parents = document.querySelectorAll('.award-winner-wrapper');

parents.forEach(parent => {
  if (parent.querySelectorAll('.award-winner').length > 1){
    parent.classList.add('winner');
  }
});

.winner {
  background-color: aquamarine;
}

<div class="award-winner-wrapper">
    <h2>Heading></h2>
    <p>Paragraph content</p>
    <p>Paragraph content</p>
    <div class="award-winner"></div>
</div>

<div class="award-winner-wrapper">
    <h2>Heading></h2>
    <p>Paragraph content</p>
    <p>Paragraph content</p>
    <div class="award-winner"></div>
</div>

<div class="award-winner-wrapper">
    <h2>Heading></h2>
    <p>Paragraph content</p>
    <p>Paragraph content</p>
    <div class="award-winner"></div>
    <div class="award-winner"></div>
</div>

遍历 javascript 数组以检查每个项目的某些子元素

Looping through a javascript array to check each item for certain children elements

javascript

loops