如何创建将容器的类属性更改为三个不同的重复类的 JavaScript 代码

Question

我有一个自动生成php程序的html容器循环，我需要一个javascript代码将容器的class=""属性更改为三个不同的重复类（例如：1,2,3,1,2, 3 等）。

这是我的 css 和 html 代码：

.test {
background: red;
}.test1 {
background: blue;
}.test2 {
background: green;
}.test3 {
background: yellow;
}

<div class="test">This container must have class="test1"</div>
<div class="test">This container must have class="test2"</div>
<div class="test">This container must have class="test3"</div>
<div class="test">From here the function need repeat so this container must have class="test1"</div>
<div class="test">This container must have class="test2"</div>
<div class="test">This container must have class="test3"</div>

我需要一个不使用 jquery 的答案

注意：我是 javascript 的初学者，所以我无法创建任何执行类似操作的代码。

Answer 1

您可以使用方法querySelectorAll，它返回匹配元素的nodeList，然后使用for/forEach循环更改类属性，如下所示：

let container = document.querySelectorAll('.test');// Read about css selectors
container.forEach((element,currentIndex)=>{
   element.setAttribute('class',`test-${index}`)
})