本文教你用纯 JavaScript（无需 jQuery）批量为具有相同类名的 HTML 容器按 1→2→3→1→2→3 的规律动态添加 test1/test2/test3 类，实现视觉循环效果。
本文教你用纯 javascript（无需 jquery）批量为具有相同类名的 html 容器按 1→2→3→1→2→3 的规律动态添加 `test1`/`test2`/`test3` 类，实现视觉循环效果。
在前端开发中，常需对一组结构相同的 DOM 元素进行规律性样式控制，例如为列表项、卡片容器等按周期轮换应用不同 CSS 类。本教程面向 JavaScript 初学者，提供简洁、可靠且无依赖的原生解决方案。
核心思路
利用 document.querySelectorAll() 获取所有目标元素（返回静态 NodeList），再通过 forEach() 遍历，结合取模运算（%） 实现「每 3 个元素为一组」的循环索引：(index % 3) + 1 可生成 1, 2, 3, 1, 2, 3... 序列，完美匹配需求。
✅ 推荐实现（简洁安全）
// 选取所有 class="test" 的容器
const containers = document.querySelectorAll('.test');
containers.forEach((el, index) => {
const cycleIndex = (index % 3) + 1; // 得到 1, 2, 3, 1, 2, 3...
el.className = `test${cycleIndex}`; // 直接替换整个 class 属性（覆盖原有 "test"）
});⚠️ 注意：el.className = ... 会完全替换原有 class。若需保留原始 test 类（如同时应用基础样式和变体样式），请改用：
el.classList.replace('test', `test${cycleIndex}`); // 或更稳妥地：先移除 test，再添加新类 el.classList.remove('test'); el.classList.add(`test${cycleIndex}`);
? 备选方案（手动计数器）
适合需要更显式逻辑控制的场景（如后续扩展条件判断）：
立即学习“Java免费学习笔记（深入）”；
const containers = document.querySelectorAll('.test');
let counter = 0;
containers.forEach(el => {
counter++;
if (counter > 3) counter = 1;
el.classList.replace('test', `test${counter}`);
});? 关键注意事项
-
执行时机：确保脚本在 DOM 加载完成后运行。推荐将代码包裹在 DOMContentLoaded 事件中：
document.addEventListener('DOMContentLoaded', () => { // 上述代码放在这里 }); - CSS 预置：确保 <style> 或外部 CSS 中已定义 .test1、.test2、.test3，否则样式不会生效。
- 类名冲突：若容器原本有其他 class（如 <div class="test card active">），直接赋值 className 会丢失它们；此时务必使用 classList 系列方法精准操作。
✅ 最终效果验证
运行后，HTML 将自动变为：
<div class="test1">This container must have class="test1"</div> <div class="test2">This container must have class="test2"</div> <div class="test3">This container must have class="test3"</div> <div class="test1">From here the function need repeat so this container must have class="test1"</div> <!-- 后续依此类推 -->
配合你的 CSS，即可看到红→蓝→绿→黄→蓝→绿… 的循环背景色变化（注意：示例 CSS 中 .test 是红色，但实际被替换后该规则不再生效）。
掌握这一模式，你还能轻松扩展为 4 种、5 种甚至动态数量的循环类名分配——只需调整取模的除数与类名模板即可。
