仅在 Vanilla JavaScript 中定位此父级的孩子

Question

我有多个具有相同类的家长(.wowParent)在同一页面上。使用我当前的代码，它不仅针对当前父母的孩子，还针对其他(.wowParent)的孩子......我需要它仅在原版 JavaScript 中当前父级的孩子上添加延迟，但我不知道该怎么做

这是一个小提琴"更好"来解释问题

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

这是我当前的代码：

// 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");
}

Answer 1

也许这个嵌套循环可以满足您的需求

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