如何使每个section下的column与item的index各自重置为0？

初始Item索引问题 #

最初通过元素index设置动画延迟时，代码如下：

初始HTML #

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

初始JS #

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

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

这段代码的问题是：所有.item的索引被视为连续数组（如[0, 1, 2, 3, 4, 5]），而非每个section下独立的索引（section1为[0,1]，section2为[0,1,2,3]），导致动画延迟随元素数量持续变长。

修复Item后遇到的Column索引问题 #

修复Item的索引问题后，将逻辑应用到section下的column时，出现了同样的索引连续问题：

更新后的HTML #

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

当前JS代码 #

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

当前问题：所有.column的索引被视为连续数组（如[0,1,2,3]），而非每个section下独立的索引（section1为[0,1]，section2为[0,1]），需要让每个Section下的Column索引独立从0开始。

解决方案 #

核心逻辑是先遍历每个Section，再在每个Section内部遍历Column，这样每个Section内部的Column索引会从0重新计数：

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

// 处理Column的索引延迟，同时整合Item的处理逻辑
Sections.forEach(Section => {
    const AnimatedColumns = Section.querySelectorAll(".column");
    AnimatedColumns.forEach((AnimatedColumn, index) => {
        // 为当前Section下的Column设置独立索引的延迟
        AnimatedColumn.style.setProperty('--index-delay', (index * 250) + "ms");
        
        // 处理当前Column内部的Item，保持每个Column内的Item索引独立
        const AnimatedElements = AnimatedColumn.querySelectorAll(".item");
        AnimatedElements.forEach((AnimatedElement, itemIndex) => {
            AnimatedElement.style.setProperty('--index-delay', (itemIndex * 250) + "ms");
        });
    });
});

逻辑说明 #

1. 先获取所有section元素并逐个遍历，确保每个Section的处理独立
2. 在每个section内部获取该Section专属的column列表，此时遍历Column的index会从0开始，不会跨Section累加
3. 将Item的处理逻辑整合到Section遍历流程中，减少重复的DOM查询操作，提升代码效率

这样就能实现每个Section下的Column索引独立重置，动画延迟不会跨Section持续变长。

内容的提问来源于stack exchange，提问作者Jason_C