How do I make the child index reset to 0 for each new parent section?

Question

I'm using the index of an item to add an animation delay to elements on my website.

Here's the HTML and JS

<div>
     <div class="section section-1">
          <div class="item item-1">
          </div>
          <div class="item item-2">
          </div>
     </div>
     <div class="section section-2">
          <div class="item item-1">
          </div>
          <div class="item item-2">
          </div>
          <div class="item item-3">
          </div>
          <div class="item item-4">
          </div>
     </div>
</div>

const AnimatedElements = document.querySelectorAll(".section .item");

AnimatedElements.forEach((AnimatedElement, index) => {
    AnimatedElement.style.setProperty('--index-delay', ([index] * 250) + "ms");
});

Now, this does work. However, The issue I am having is the JS reads the item index as one Array (I.E [0, 1, 2, 3, 4, 5]) rather than two separate arrays within their respective sections (I.E section 1 [0, 1], Section 2 [0, 1, 2, 3]).

Is there any way I can make the index reset to 0 for each new section? As otherwise the animation delay just gets longer and longer the further you scroll down the page.

Edit: I've managed to get the issue fix. However, I have now applied the JS to the columns within the section as well as the items and I am now experiencing the same issue as before.

Here's the updated HTML and JS

<div>
     <div class="section section-1">
          <div class="column column-1">
               <div class="item item-1">
               </div>
          </div>
          <div class="column column-2">
               <div class="item item-2">
               </div>
          </div>
     </div>
     <div class="section section-2">
          <div class="column column-1">
               <div class="item item-1">
               </div>
               <div class="item item-2">
               </div>
               <div class="item item-3">
               </div>
          </div>
          <div class="column column-2">
               <div class="item item-4">
               </div>
          </div>
     </div>
</div>

const Sections = document.querySelectorAll(".section");
const Columns = document.querySelectorAll(".section .column");

Columns.forEach(Column => {
    const AnimatedElements = Column.querySelectorAll(".item");
    AnimatedElements.forEach((AnimatedElement, index) => {
        AnimatedElement.style.setProperty('--index-delay', (index * 250) + "ms");
    });
});

Sections.forEach(Section => {
    const AnimatedColumns = Section.querySelectorAll(".column");
    AnimatedColumns.forEach((AnimatedColumn, index) => {
        AnimatedColumn.style.setProperty('--index-delay', (index * 250) + "ms");
    });
});

As said before the issue is doing the exact same thing that it did before where the JS reads the column index as one Array (I.E [0, 1, 2, 3]) rather than two separate arrays within their respective sections (I.E section 1 [0, 1], Section 2 [0, 1]).

Any help to fix this issue would be greatly appreciated. Thanks

Answer 1

Use nested loops. The outer loop is for the sections, the inner loop is for the items. The item indexes will start at 0 in each section.

const sections = document.querySelectorAll(".section");

sections.forEach(section => {
  const AnimatedElements = section.querySelectorAll(".item");
  console.log([...AnimatedElements]);
  AnimatedElements.forEach((AnimatedElement, index) => {
    AnimatedElement.style.setProperty('--index-delay', (index * 250) + "ms");
  });
});

<div>
  <div class="section section-1">
    <div class="item item-1">1A
    </div>
    <div class="item item-2">1B
    </div>
  </div>
  <div class="section section-2">
    <div class="item item-1">2A
    </div>
    <div class="item item-2">2B
    </div>
    <div class="item item-3">2C
    </div>
    <div class="item item-4">2D
    </div>
  </div>
</div>