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

I am trying to loop through a webpage and change certain styles depending on the number of children with the class 'award-winner' within elements with the class 'award-winner-wrapper'. Currently, I have been able to check the webpage for the parent elements using this.

<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)

The problem I having is using a foreach loop to check each array item for the 'award-winner' class and if there are 2 or more elements with that class change some styles.

javascript loops

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

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

Sources

Related Questions