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

Question

我正在尝试循环浏览网页并根据具有类'award-winner-wrapper'的元素中具有类'award-winner'的孩子的数量来更改某些样式。 目前，我已经能够使用它检查网页的父元素。

<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 循环来检查“获奖者”类的每个数组项，并且该类是否有 2 个或更多元素会更改某些样式。

Answer 1

只需遍历您的parents NodeList （此处使用NodeList.forEach() ）并使用querySelectorAll()在这里查询父级的相关子级，并使用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>