本文介绍如何使用 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
  • 以此类推 ✅

对应实现代码如下：

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

$('.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');

此方法简洁高效，无需额外循环嵌套或状态变量，适用于各类基于索引分组的属性批量初始化场景。