本文介绍如何使用 jquery 为一组元素按每 3 个为一组、每组赋予相同且递增的 data-index 值（如 3、6、9…），解决静态 html 中动态批量赋值需求。
在实际开发中，我们常需为 DOM 元素动态添加或更新 data-* 属性，尤其在列表渲染、分页加载或交互逻辑依赖索引分组时。例如，你有一组 .item 元素，希望每连续 3 个元素共享同一个 data-index 值，且该值以 3 为步长递增（3 → 6 → 9 → …），而非默认的逐项递增（0, 1, 2, …）。
关键在于将元素索引 i（从 0 开始）映射为分组编号：
- 索引 0,1,2 → 第 0 组 → data-index = 3 × 0 + 3 = 3
- 索引 3,4,5 → 第 1 组 → data-index = 3 × 1 + 3 = 6
- 索引 6,7,8 → 第 2 组 → data-index = 3 × 2 + 3 = 9
对应公式为：
var index = 3 * Math.floor(i / 3) + 3;
✅ 完整实现代码如下：
$('.item').each(function(i) {
var index = 3 * Math.floor(i / 3) + 3;
$(this).attr('data-index', index);
});? 说明： Math.floor(i / 3) 实现“向下取整分组”，将 [0,1,2]→0、[3,4,5]→1、[6,7,8]→2… ×3 + 3 确保起始值为 3，步长为 3；若需起始为 6、步长为 6，可改为 6 * Math.floor(i / 3) + 6。 使用 .attr('data-index', value) 可写入属性；若后续需读取并解析为数字，推荐用 .data('index')（jQuery 自动类型转换），但注意 .data() 不会实时反映 DOM 属性变更，仅适用于初始化后读取。
⚠️ 注意事项：
- 确保 jQuery 已正确加载，且 DOM 已就绪（建议包裹在 $(document).ready() 中）；
- 若元素动态插入，需在插入后重新执行该逻辑，或使用事件委托配合数据管理；
- 避免在循环中频繁调用 $() 创建新 jQuery 对象，可提前缓存：
const $items = $('.item'); $items.each(function(i) { $(this).attr('data-index', 3 * Math.floor(i / 3) + 3); });
此方法简洁高效，无需额外 HTML 结构或服务端干预，适用于模板预渲染+前端增强的典型场景。
