循环遍历父容器的子节点

Question

我有两组父容器，每个容器有5个孩子 - 每个容器有4个段落和2个按钮。

单击每个容器中的按钮时，会将一个类添加到段落元素中，一次一个。在到达最后一个子句元素之后，第一个子句子项再次添加到该类。

以下是代码。当达到最后一段时，我希望将该类立即添加到第一段 - 但计数器不会重置。 如果你检查console.log，counter和j都会转到4，这不应该。在计数器和j都达到3之后，它应该重置为0.我的参数可能会偏离。

＆＃13;

＆＃13;

var container = document.querySelectorAll(".container");
var button = document.querySelectorAll("button");
var p = document.querySelectorAll("p");

var click = function(i) {
  var counter = -1;
  button[i].addEventListener("click", function() {
    counter++;
    console.log(counter);

    for (j = 0; j < p.length / 2 + 1; j++) {
      console.log(i, j);
      this.parentNode.children[j].classList.remove("active");
      if (j === counter) {
        this.parentNode.children[j].classList.add("active");
      }
      if (counter === p.length / 2) {
        counter = -1;
      }
    }
  });
}

for (i = 0; i < button.length; i++) {
  click(i);
}

＆＃13;

.active {
  background-color: red;
}

＆＃13;

<div class="container">
  <p>Test1</p>
  <p>Test2</p>
  <p>Test3</p>
  <p>Test4</p>
  <button>click</button>
</div>

<div class="container">
  <p>Test1</p>
  <p>Test2</p>
  <p>Test3</p>
  <p>Test4</p>
  <button>click</button>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

在增量之后立即添加模数4操作：

counter %= 4;

由于段落数量可能会发生变化，您可以动态计算其数量：

var maxParagrapgh = button[i].parentNode.querySelectorAll('p').length;

所以增量为：

counter = (counter + 1) % maxParagrapgh;

正在运行的代码段：

＆＃13;

＆＃13;

window.addEventListener('DOMContentLoaded', function(e) {
    var container = document.querySelectorAll(".container");
    var button = document.querySelectorAll("button");
    var p = document.querySelectorAll("p");

    var click = function(i){
        var counter = -1;
        var maxParagrapgh = button[i].parentNode.querySelectorAll('p').length;
        button[i].addEventListener("click", function(){
            counter = (counter + 1) % maxParagrapgh;
            // console.log(counter);

            for(j=0;j<p.length/2+1;j++){
                // console.log(i, j);
                this.parentNode.children[j].classList.remove("active");
                if(j === counter){
                    this.parentNode.children[j].classList.add("active");
                }
                if(counter === p.length/2){
                    counter = -1;
                }
            }
        });
    }

    for(i=0;i<button.length;i++){
        click(i);
    }
})

＆＃13;

.active {
    background-color: red;
}

＆＃13;

<div class="container">
    <p>Test1</p>
    <p>Test2</p>
    <p>Test3</p>
    <p>Test4</p>
    <button>click</button>
</div>

<div class="container">
    <p>Test1</p>
    <p>Test2</p>
    <p>Test3</p>
    <p>Test4</p>
    <button>click</button>
</div>

＆＃13;

＆＃13;

＆＃13;