本文介绍如何使用 jquery 为每组连续 3 个元素统一设置递增的 `data-index` 值（如 3、6、9…），解决批量动态赋值需求，避免硬编码并提升可维护性。
在实际开发中，常需为 DOM 元素批量添加或更新 data-* 属性以支持后续逻辑（如分页渲染、动画分组、虚拟滚动索引等）。本例要求：将 .item 元素按每 3 个一组划分，第一组 data-index="3"，第二组 "6"，第三组 "9"，依此类推——即索引值呈等差数列（公差为 3），且每组内保持一致。
核心思路是利用当前元素索引 i（从 0 开始）计算所属“组号”，再映射为对应数据值。关键公式为：
var index = 3 * Math.floor(i / 3) + 3;
- Math.floor(i / 3) 将索引 i 归入整数组（0→0, 1→0, 2→0, 3→1, 4→1, 5→1…），即每 3 个元素为一组；
- 乘以 3 得到基础值（0, 3, 6…），再加 3 即得目标序列（3, 6, 9…）。
完整实现代码如下：
$('.item').each(function(i) {
var index = 3 * Math.floor(i / 3) + 3;
$(this).attr('data-index', index);
});✅ 优势说明：
- 无需预知总数量，自动适配任意长度列表；
- 时间复杂度 O(n)，性能高效；
- 可轻松扩展：若需每 5 个一组、起始值为 10，仅需改为 10 * Math.floor(i / 5) + 10。
⚠️ 注意事项：
- 确保 jQuery 已正确加载且 DOM 已就绪（建议包裹在 $(document).ready() 中）；
- 若元素动态插入，需在插入后重新执行该逻辑，或使用事件委托配合 data-index 的语义化用途；
- 如需兼容旧版 IE 或追求极致性能，可改用原生 setAttribute（this.setAttribute('data-index', index)），避免 jQuery 封装开销。
该方案简洁、健壮、可复用，是处理分组数据属性赋值的经典实践。
