如何用jQuery为元素批量设置分组递增的data-index属性？

我有一组带.item类的元素，需要为每个元素添加data-index属性，要求前3个元素的data-index值为3，接下来3个为6，以此类推，预期效果如下：

<div class="items">
    <div class="item" data-index="3"></div>
    <div class="item" data-index="3"></div>
    <div class="item" data-index="3"></div>

    <div class="item" data-index="6"></div>
    <div class="item" data-index="6"></div>
    <div class="item" data-index="6"></div>

    <div class="item" data-index="9"></div>
    <div class="item" data-index="9"></div>
    <div class="item" data-index="9"></div>
</div>

我当前的代码只能设置0、1、2...的连续数值：

$('.item').each(function(i) {
  $(this).attr('data-index',i)
})

请问该如何实现需求？

解决方案 #

你只需要在循环索引i的基础上做简单数学计算就能实现需求：

$('.item').each(function(i) {
  // 按每3个元素分组，组号从1开始计算
  const group = Math.floor(i / 3) + 1;
  // 每组对应的值为组号乘以3
  $(this).attr('data-index', group * 3);
})

逻辑说明 #

• Math.floor(i / 3)：将从0开始的索引i按每3个元素划分为一组，得到结果为0、0、0、1、1、1、2、2、2...
• 加1后组号变为1、1、1、2、2、2、3、3、3...
• 最后乘以3，就得到3、3、3、6、6、6、9、9、9...的目标值

如果后续需要调整每组元素数量或起始的data-index值，直接修改对应数字即可：

• 比如每组4个元素，把3改成4
• 比如起始值为4且每组递增4，把group * 3改成group * 4

内容的提问来源于stack exchange，提问作者user3026971