本文详解如何使用 jquery 为元素按固定分组（如每 3 个一组）动态设置统一的 data-index 值，例如前 3 个元素设为 3，第 4–6 个设为 6，依此类推，并提供可复用的计算逻辑与注意事项。
在前端开发中，常需为一批结构相同的 DOM 元素批量添加或更新自定义 data-* 属性，尤其在实现分页、分组渲染、虚拟滚动或与后端交互时，data-index 等语义化属性能显著提升数据映射的准确性与可维护性。
针对“每 N 个元素共享同一 index 值，且该值按等差数列递增”的需求（如本例中 N=3，起始值为 3，公差为 3），核心在于将零起点的索引 i（由 .each() 提供）映射为分组编号，再转换为目标值。
✅ 正确实现代码如下：
$('.item').each(function(i) {
const groupSize = 3; // 每组元素数量
const startIndex = 3; // 第一组的 data-index 值
const step = 3; // 组间增量（即公差）
const groupIndex = Math.floor(i / groupSize); // 当前元素所属组号（从 0 开始）
const dataIndex = startIndex + groupIndex * step;
$(this).attr('data-index', dataIndex);
});? 关键逻辑说明：
- Math.floor(i / groupSize) 将连续索引 i = 0,1,2,3,4,5,... 分组为 0,0,0,1,1,1,...；
- 乘以 step 并加上 startIndex，即可得到 3,3,3,6,6,6,9,9,9...；
- 使用 attr('data-index', value) 确保属性被写入 HTML（若仅需 JS 内部存储，可改用 data() 方法，但注意其不反映在 DOM 中）。
⚠️ 注意事项：
- 确保 jQuery 已正确加载，且 .item 元素在执行脚本时已存在于 DOM 中（推荐置于 $(document).ready() 或组件挂载后调用）；
- 若后续需动态增删 .item 元素，应封装为函数并重新执行，或结合事件委托管理；
- 避免在循环中频繁调用 $(this) —— 可缓存为变量提升性能（如 const $el = $(this);）；
- 如需兼容旧版 IE，Math.floor 安全可靠；现代项目中也可用 Math.trunc(i / groupSize)，效果一致。
? 扩展建议：
该模式可轻松参数化——只需修改 groupSize、startIndex 和 step，即可适配任意分组策略（例如每 5 个设为 10/15/20…）。若需支持反向分组（如末尾优先）或非等长分组，可结合 slice() 或 filter() 预处理集合。
通过这一简洁而富有扩展性的方案，你不仅能精准控制 data-index 的生成逻辑，还能为后续的数据绑定、动画分组或 API 请求打下坚实基础。
