Javascript 在父容器的子容器中循环

我有两组父容器，每个容器都有5个子容器——每个容器有4个段落和2个按钮

单击每个容器中的按钮时，将向段落元素添加一个类，一次添加一个类。到达最后一个段落子元素后，第一个段落子元素将再次向其添加类

下面是代码。当到达最后一段时，我希望该类立即添加到第一段，但计数器不会重置。 如果您检查console.log，计数器和j都会转到4，它不应该转到4。计数器和j都达到3后，应复位回0。我的参数可能太离谱了

var container=document.querySelectorAll（“.container”）；
var button=document.queryselectoral（“按钮”）；
var p=document.queryselectoral（“p”）；
var click=函数（i）{
var计数器=-1；
按钮[i]。addEventListener（“单击”，函数（）{
计数器++；
控制台日志（计数器）；
对于（j=0；j

.active{
背景色：红色；
}

测试1

测试2

测试3

测试4

点击
测试1

测试2

测试3

测试4

点击

在增量之后立即添加模数4 op就足够了：

counter %= 4;

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

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

因此，增量是：

counter = (counter + 1) % maxParagrapgh;

正在运行的代码段：

window.addEventListener（'DOMContentLoaded'，函数（e）{
var container=document.queryselectoral（“.container”）；
var button=document.queryselectoral（“按钮”）；
var p=document.queryselectoral（“p”）；
var click=函数（i）{
var计数器=-1；
var maxParagrapgh=button[i].parentNode.querySelectorAll（'p'）.length；
按钮[i]。addEventListener（“单击”，函数（）{
计数器=（计数器+1）%maxparaggh；
//控制台日志（计数器）；
对于（j=0；jt谢谢。我永远不会想到你的解决方案。这是一个启示……我从来都不知道你可以在父节点内查询选择器（All）……太棒了……再加上使用模来处理可变长度……谢谢