原生JS循环为容器元素添加三类CSS类

本文教你用纯 JavaScript（无需 jQuery）为一组具有相同初始类名的容器元素，按 1→2→3→1→2→3 的规律循环添加不同的 CSS 类，实现样式轮换效果。

在实际开发中，经常需要让一组元素按顺序应用不同的样式——例如轮播图的指示器、列表的交替背景色或卡片组的花色排列。纯 JavaScript 就能轻松搞定，完全不需要依赖 jQuery。核心思路很简单：获取所有目标元素，遍历并根据索引位置计算余数，动态添加对应类名。下面直接给出两种可靠的实现方案。

推荐写法（适合初学者快速上手）

// 获取所有 class="test" 的 div 元素
const containers = document.querySelectorAll('.test');

// 遍历每个元素，按索引 % 3 + 1 计算循环编号（1, 2, 3）
containers.forEach((el, index) => {
  const cycleIndex = (index % 3) + 1; // 得到 1、2、3、1、2、3...
  el.className = `test${cycleIndex}`; // 直接替换整个 class 属性（注意：会移除原始 "test"）
});

注意：el.className = ... 会完全覆盖原有类名（包括初始的 test）。如果希望保留原始类或叠加新类，请使用 classList 方案。

更灵活的写法（保留原始类并叠加新类）

const containers = document.querySelectorAll('.test');
containers.forEach((el, index) => {
  const cycleIndex = (index % 3) + 1;
  // 先清除可能已存在的 test1/test2/test3 类
  el.classList.remove('test1', 'test2', 'test3');
  // 再添加对应的新类
  el.classList.add(`test${cycleIndex}`);
});

这样既保持了语义清晰，又避免了类名冲突，兼容性也足够好（支持所有现代浏览器及 IE10+）。

关键知识点说明

• document.querySelectorAll('.test') 返回静态 NodeList，安全可靠，不用担心动态添加元素时的变化问题。
• index % 3 是实现循环的核心：索引 0,1,2,3,4,5... 对应余数 0,1,2,0,1,2...，加 1 后即得 1,2,3,1,2,3...。这个规律非常干净。
• classList.add() 和 .remove() 是操作类名的标准、安全方式，比直接拼接字符串要靠谱得多。
• 不建议使用全局计数器（如 count++）——容易出错且完全没有必要，索引本身就提供了天然的唯一序号。

补充：CSS 类定义建议（与 HTML 一致）

确保你的 CSS 正确声明了样式：

.test1 { background: blue; }
.test2 { background: green; }
.test3 { background: yellow; }
/* .test 原始类可留作基础样式或删除（因已被替换） */

运行上述脚本后，HTML 将自动变为：

This container must have class="test1"
This container must have class="test2"
This container must have class="test3"
From here the function needs to repeat so this container must have class="test1"

总结：只需 4 行核心代码，就能实现任意数量容器的三阶循环样式分配——简洁、可读、无依赖，非常适合初学者理解与复用。