在前端页面开发中，经常会遇到需要给一组同类元素批量设置data-index属性的场景，比如列表项、卡片组件等，通过data-index可以快速定位元素序号，方便后续的事件处理或者数据操作。jQuery作为常用的前端库，提供了多种实现批量设置该属性的方式，不同方式的效率和适用场景存在差异。
使用each方法遍历设置
each方法是jQuery中遍历集合元素的常用方法，通过遍历选中的元素集合，逐个为每个元素设置data-index属性，这种方式逻辑清晰，适合需要对每个元素做额外处理的场景。
// 选中所有class为item的元素，批量设置data-index
$('.item').each(function(index) {
// index为当前遍历的索引，从0开始
$(this).attr('data-index', index);
});
上述代码中，each方法的回调函数接收index参数，代表当前元素在集合中的序号，直接将该序号作为data-index的值通过attr方法设置到元素上即可。如果需要从1开始计数，只需要将index加1即可。
使用attr方法直接传递函数
jQuery的attr方法支持传入一个函数作为第二个参数，函数会接收当前元素的索引和原有属性值作为参数，返回的值会作为新的属性值设置到元素上，这种方式比each方法更简洁，减少了额外的函数嵌套。
// 直接通过attr方法传入函数设置data-index
$('.item').attr('data-index', function(index) {
// 返回当前索引作为属性值
return index;
});
这种方式的执行效率和each方法基本一致，但是代码量更少，可读性更高，适合不需要额外处理每个元素的场景，是批量设置属性的推荐写法。
两种方式的性能对比
两种方式的核心逻辑都是遍历元素集合，性能差异非常小，具体选择可以根据场景判断：
- 如果只需要批量设置属性，不需要对每个元素做其他操作，优先选择attr传函数的方式，代码更简洁
- 如果设置属性的同时还需要对每个元素做其他逻辑处理，比如修改样式、绑定事件等，使用each方法更合适，逻辑更清晰
注意事项
设置data-index属性时需要注意，不要和jQuery的data方法混淆，data()方法设置的是jQuery内部的缓存数据，不会直接修改DOM的data-index属性，而attr()方法会直接修改DOM属性，后续通过getAttribute或者原生JS可以获取到对应的值。
如果需要同时设置多个data属性，也可以在attr的函数中返回对应的对象，不过批量设置单一data-index属性时，上述两种方式已经足够高效。另外如果元素数量非常多，比如超过上千个，建议结合文档碎片或者分批处理，避免一次性操作导致页面卡顿。
jQuerydata-index批量设置属性each方法attr方法修改时间：2026-07-14 09:06:17