用原生JavaScript循环给容器元素添加三类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+）。