用原生 JS 循环添加三个重复 CSS 类

本文手把手教你用原生 JavaScript 实现一组 HTML 元素按 1→2→3→1→2→3 的规律动态轮换添加 `test1`/`test2`/`test3` 类，无需任何框架依赖，既简洁又可靠；通过 `querySelectorAll` + `forEach` + 取模运算（`index % 3 + 1`）轻松达成视觉循环效果，并贴心提醒 class 替换与保留的两种策略、DOM 加载时机、CSS 预置要点及扩展方法——无论你是刚入门的新手，还是需要快速落地样式的开发者，都能即学即用，轻松驾驭批量样式控制！

本文教你用纯 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}`);

? 备选方案（手动计数器）

适合需要更显式逻辑控制的场景（如后续扩展条件判断）：

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 预置：确保