本文介绍如何使用 jquery 为每组连续 3 个元素统一设置递增的 data-index 值（如 3、3、3、6、6、6、9、9、9），解决简单索引递增无法满足分组需求的问题。
在实际开发中，我们常需为 dom 元素动态添加或更新 data-* 属性以支撑交互逻辑或数据绑定。但当需求涉及按块分组赋值（例如每 3 个元素共享同一索引值，且该值以步长 3 递增）时，直接使用循环索引 i 会得到 0,1,2,3,4,5…，不符合要求。
核心思路是：将零起点索引 i（0-based）映射为分组编号，再换算为目标值。
- 每 3 个元素为一组 → 组号 = math.floor(i / 3)（整除取整）
- 首组目标值为 3 → 值 = 3 × 组号 + 3
- 当 i = 0,1,2 → 组号 = 0 → 值 = 3×0+3 = 3
- 当 i = 3,4,5 → 组号 = 1 → 值 = 3×1+3 = 6
- 当 i = 6,7,8 → 组号 = 2 → 值 = 3×2+3 = 9
- 以此类推 ✅
对应实现代码如下：
$('.item').each(function(i) { var index = 3 * Math.floor(i / 3) + 3; $(this).attr('data-index', index); });✅ 推荐使用 .attr()：data-index 是标准 html 属性，应通过 .attr() 设置；若后续需读取并自动转换类型（如数字），可配合 .data() 使用，但注意 .data() 仅读取初始 data-* 值且缓存后不响应 .attr() 的后续修改。
注意事项：
- 确保 jquery 已正确加载，且 .item 元素在执行脚本时已存在于 DOM 中（建议包裹在 $(document).ready() 内）；
- 若元素动态生成，需在插入 DOM 后立即执行该逻辑；
- 如需支持更大步长或自定义起始值，可封装为函数：
function setGroupedDataAttr(selector, attrName, groupSize = 3, startValue = 3, step = 3) { $(selector).each(function(i) { var groupIndex = Math.floor(i / groupSize); var value = startValue + groupIndex * step; $(this).attr(attrName, value); }); } // 调用：setGroupedDataAttr('.item', 'data-index');
此方法简洁高效，无需额外循环嵌套或状态变量，适用于各类基于索引分组的属性批量初始化场景。