我正在嘗試回圈瀏覽網頁并根據具有類'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 hljs-attr">award-winner-wrapper">
<h2>Heading></h2>
<p>Paragraph content</p>
<p>Paragraph content</p>
<div class="award-winner'></div>
</div>
<div hljs-attr">award-winner-wrapper">
<h2>Heading></h2>
<p>Paragraph content</p>
<p>Paragraph content</p>
<div class="award-winner'></div>
<div hljs-attr">award-winner'></div>
</div>
let parents = document.querySelectorAll('.award-winner-wrapper');
let pArray = Array.from(parents)
我遇到的問題是使用 foreach 回圈來檢查“獲獎者”類的每個陣列項，并且該類是否有 2 個或更多元素會更改某些樣式。
uj5u.com熱心網友回復：
只需遍歷您的parentsNodeList （此處使用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>轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/479061.html
標籤：javascript 循环