javascript 如何使每个新父节的子索引重置为0？

xv8emn3q 于 2023-02-15 发布在 Java

关注(0)|答案(1)|浏览(140)

我正在使用一个项目的index添加一个动画延迟到我的网站上的元素。
这是HTML和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");
});

现在，这确实有效。然而，我遇到的问题是JS将条目索引作为一个数组（即[0，1，2，3，4，5]）读取，而不是在各自的节中读取两个单独的数组（即节1 [0，1]，节2 [0，1，2，3]）。
有什么办法可以让索引重置为0的每一个新的部分？否则，动画延迟只会越来越长，你进一步向下滚动页面。

JavaScript

来源：https://stackoverflow.com/questions/75441353/how-do-i-make-the-child-index-reset-to-0-for-each-new-parent-section

1条答案

按热度按时间

ozxc1zmp1#

使用嵌套循环。外层循环用于节，内层循环用于项。每个节中的项索引将从0开始。

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>

赞(0）回复(0）举报 2023-02-15

我来回答

javascript 如何使每个新父节的子索引重置为0？

1条答案

相关问题

热门标签

最新问答