本文教你用纯 javascript（无需 jquery）为一组具有相同初始类名的容器元素，按 1→2→3→1→2→3 的规律循环添加不同的 css 类，实现样式轮换效果。
本文教你用纯 javascript（无需 jquery）为一组具有相同初始类名的容器元素，按 1→2→3→1→2→3 的规律循环添加不同的 css 类，实现样式轮换效果。
要实现容器元素的类名循环分配（如 test1 → test2 → test3 → test1 …），核心思路是：获取所有目标元素，遍历并根据索引位置计算余数，动态添加对应类名。以下是推荐的、简洁可靠的实现方案：
✅ 推荐写法（推荐初学者使用）
// 获取所有 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 正确声明了样式：
立即学习“Java免费学习笔记（深入）”；
.test1 { background: blue; }
.test2 { background: green; }
.test3 { background: yellow; }
/* .test 原始类可留作基础样式或删除（因已被替换） */运行上述脚本后，HTML 将自动变为：
<div class="test test1">This container must have class="test1"</div> <div class="test test2">This container must have class="test2"</div> <div class="test test3">This container must have class="test3"</div> <div class="test test1">From here the function need repeat so this container must have class="test1"</div> <!-- 依此类推 -->
✅ 总结：只需 4 行核心代码，即可实现任意数量容器的三阶循环样式分配——简洁、可读、无依赖、适合初学者理解与复用。
