CODEWITHSUNDEEP
javascript
Apache349089
Apache349089

Reputation: 13

Target this Parent's Children only in Vanilla JavaScript

I've multiple Parents with the same class (.wowParent) on the same page. With my current code it doesn't target exclusively the current Parent's Children but also those of the other (.wowParent)... I need it to add delay only on Child of current Parent in Vanilla JavaScript but I can't figure out how to do it

Here's a Fiddle "better" explaining the problem

<div class="wowParent">
    <div class="wow"></div>
    <div></div>
    <div></div>
    <div class="wow"></div>
    <div class="wow"></div>
    <div class="wow"></div>
</div>

Here's my current code:

// delay the next element by 100ms
var delay = 0;
const array = document.querySelectorAll(".wowParent .wow");
for (let index = 0; index < array.length; index++) {
    delay = delay + 100; // delay by 100ms
    index += 0;
    // reset loop every 4
    if(index % 4 == 0) { delay = 0; }
    array[index].style.setProperty('--delay', delay + "ms");
}

Upvotes: 1

Views: 290

Answers (1)

Jaromanda X
Jaromanda X

Reputation: 1

Perhaps this nested loop does what you need

document.querySelectorAll(".wowParent").forEach(parent => {
  parent.querySelectorAll(".wow").forEach((child, index) => {
    const delay = (index % 4) * 1000;
    child.style.setProperty('--delay', delay + "ms");
  });
});

Upvotes: 1

Related Questions