时间戳

首页 > 解决方案 > 原生 JS 使用每个父类上的计数器重置添加类

javascript - 原生 JS 使用每个父类上的计数器重置添加类

问题描述

我有这个结构：

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

我需要在每个子 div 上加一并在计数器传递给新的父类时重置计数器。我可以使用 Jquery 轻松地做到这一点，each但我很难让它与原生 JavaScript 一起使用，因为我正在处理的项目不使用 Jquery。结构应如下所示：

<div class="parent">
  <div class="child-1"></div>
  <div class="child-2"></div>
  <div class="child-3"></div>
  <div class="child-4"></div>
</div>

<div class="parent">
  <div class="child-1"></div>
  <div class="child-2"></div>
  <div class="child-3"></div>
</div>

我一直在使用var ParentDiv= document.querySelectorAll(".parent");和ChildDiv = document.querySelectorAll(".child");

我有一个计数器正在进行for循环，但无法让它重新启动每个父级的计数器。有什么帮助可以指出我如何做到这一点？

标签： javascriptecmascript-6

解决方案

您可以遍历父母，并为每个父母将计数器重置回一个，然后再遍历孩子。像这样的东西：

let ParentDiv= document.querySelectorAll(".parent");
for (let parent of ParentDiv) {
  let count = 1
  for (let child of parent.querySelectorAll(".child")){
    child.className += '-' + count++
  }
}

// print parents to check results:
for (let parent of document.querySelectorAll(".parent")){
  console.log(parent.innerHTML)
}
<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

推荐阅读