本文介绍如何使用 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 封装开销。

该方案简洁、健壮、可复用，是处理分组数据属性赋值的经典实践。