Estoy tratando de recorrer una página web y cambiar ciertos estilos dependiendo de la cantidad de niños con la clase 'ganador del premio' dentro de elementos con la clase 'envoltorio del ganador del premio'. Actualmente, he podido consultar la página web para ver los elementos principales usando esto.
<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)El problema que tengo es usar un ciclo foreach para verificar cada elemento de la matriz para la clase 'ganador del premio' y si hay 2 o más elementos con esa clase, cambie algunos estilos.
Simplemente itere sobre sus parents NodeList (aquí usando NodeList.forEach() ) y consulte al padre para los niños relevantes aquí con querySelectorAll() y agregando una clase con 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>