本文教你使用纯 JavaScript（无需 jQuery）自动为一组具有相同初始类名的容器元素，按 1→2→3→1→2→3 的规律循环添加 test1、test2、test3 类，从而实现样式轮换。
本文教你使用纯 javascript（无需 jquery）自动为一组具有相同初始类名的容器元素，按 1→2→3→1→2→3 的规律循环添加 `test1`、`test2`、`test3` 类，从而实现样式轮换。
要实现容器类名的三循环（如 test1 → test2 → test3 → test1…），核心思路是：获取所有目标元素，遍历并根据索引位置计算余数，动态添加对应类名。以下是完整、可靠且适合初学者的实现方案。
✅ 推荐写法（简洁、安全、语义清晰）
// 获取所有 class="test" 的 div 元素
const containers = document.querySelectorAll('.test');
// 遍历每个元素，按索引 % 3 + 1 计算循环序号（1, 2, 3, 1, 2, 3...）
containers.forEach((el, index) => {
const cycleIndex = (index % 3) + 1; // 得到 1、2 或 3
el.className = `test${cycleIndex}`; // 直接替换整个 class 属性（注意：会清除原有 "test"）
});⚠️ 注意：上面代码使用 el.className = ... 会完全替换原始 class="test"，最终 DOM 中将只保留 test1/test2/test3。若需保留原始类名并追加（例如同时拥有 test test1），请改用：
containers.forEach((el, index) => {
const cycleIndex = (index % 3) + 1;
el.className = 'test test' + cycleIndex; // 手动拼接，或更推荐：
// el.classList.replace('test', `test${cycleIndex}`); // 替换旧类，保留其他类（如有）
});? 补充说明与最佳实践
- document.querySelectorAll('.test') 返回的是静态 NodeList（非数组），但支持 forEach —— 现代浏览器均兼容（IE 不支持，如需兼容 IE，请用 Array.from(...).forEach() 或传统 for 循环）。
- 使用 (index % 3) + 1 是关键：%（取模运算）确保索引 0→1→2→3→4→5 映射为 1→2→3→1→2→3，天然形成循环。
- CSS 中无需定义 .test 的样式（除非作为默认兜底），因为最终每个元素只会拥有 test1/test2/test3 之一；但建议保留 .test 作为初始标识或 JS 选择器，不参与实际样式渲染。
? 完整可运行示例
<!DOCTYPE html>
<html>
<head>
<style>
.test1 { background: blue; }
.test2 { background: green; }
.test3 { background: yellow; }
/* .test 可留空，仅作 JS 选择器 */
</style>
</head>
<body>
<div class="test">This container must have class="test1"</div>
<div class="test">This container must have class="test2"</div>
<div class="test">This container must have class="test3"</div>
<div class="test">From here the function need repeat so this container must have class="test1"</div>
<div class="test">This container must have class="test2"</div>
<div class="test">This container must have class="test3"</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
const containers = document.querySelectorAll('.test');
containers.forEach((el, i) => {
el.className = `test${(i % 3) + 1}`;
});
});
</script>
</body>
</html>✅ 运行后，6 个 <div> 将依次获得 test1、test2、test3、test1、test2、test3 类，背景色按蓝→绿→黄循环呈现。
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
掌握这一模式后，你可轻松扩展为任意数量循环（如 % 4 实现四循环），是前端样式自动化与数据驱动渲染的基础技能之一。
立即学习“Java免费学习笔记（深入）”；
