data-index是纯自定义字符串属性，需手动计算分组逻辑；设值用setattribute或.attr()，读取时需parseint转数字，.data()仅缓存不更新html。
直接用 setAttribute 或 jQuery 的 .attr() 设置 data-* 属性即可，但索引值不是“自动编号”，必须自己算清楚分组逻辑或业务含义——否则后续读取时会拿到错的值。
data-index 是属性名，不是内置功能
data-index 只是开发者约定的属性名，浏览器不解析、不校验、不递增。它和 data-user-id 或 data-field 一样，纯属字符串键值对。你写 data-index="5"，它就存 "5"；你写 data-index="abc"，它也照存不误。
常见错误现象：
- 循环中直接用
i当索引：el.setAttribute('data-index', i)→ 得到 0,1,2,3…，但实际要的是每 3 个元素共用一个值（如 3,3,3,6,6,6） - 用
.data()写值后读不到更新：$(el).data('index', 5)不会修改 HTML 属性，只存在 jQuery 内部缓存里
正确做法：
- 需要持久化、供其他脚本或服务端读取 → 用
el.setAttribute('data-index', value)或$(el).attr('data-index', value) - 仅 JS 内部使用、且值可能动态变化 → 可用
el.dataset.index = value（注意驼峰转连字符：dataset.fooBar →data-foo-bar） - 批量设置且带分组逻辑 → 手动计算组号：
Math.floor(i / groupSize) * step + startValue
jQuery 中用 .attr() 设置 data-index 最稳妥
jQuery 的 .data() 方法有缓存机制：首次读取 data-index 时会从 HTML 解析并转类型（如 "123" → 123），但之后再调用 .attr('data-index', ...) 修改属性，.data() 不会同步更新。这会导致“明明改了属性，.data('index') 还是旧值”的困惑。
所以只要目标是写入 HTML 属性（比如服务端要抓取、CSS 要用属性选择器、或调试时想在 Elements 面板里看到），一律用 .attr()：
$('.item').each(function(i) {
var groupIndex = Math.floor(i / 3);
var value = 3 + groupIndex * 3;
$(this).attr('data-index', value);
});
如果后续要读取这个值并当数字用，别偷懒直接 $(this).data('index')，而应显式转换：parseInt($(this).attr('data-index'), 10)。
原生 JS 设置 data-* 属性的三种写法差异
原生 JS 有三个常用入口，行为不同：
-
el.setAttribute('data-index', '7')→ 写入 HTML，可被getAttribute()和dataset.index同时读到（值为字符串） -
el.dataset.index = 7→ 写入 HTML（自动转字符串），dataset.index读取时仍是字符串；若赋值对象或数组，会调用toString()，易出意外 -
el.index = 7→ 写入元素实例属性，不反映在 HTML 中，getAttribute()读不到，且和data-完全无关
推荐组合：
- 初始化写入 → 用
setAttribute，确保 HTML 可见、可调试 - 运行时高频读取 → 缓存
parseInt(el.getAttribute('data-index'))结果，避免重复解析 - 避免用
dataset存复杂结构，它只适合简单字符串映射
data-index 值该不该用数字？关键看用途
用数字还是字符串，取决于你怎么读、谁来读：
- 服务端模板渲染或爬虫解析 → 必须字符串，且建议带语义前缀，如
data-index="row-12"，避免纯数字冲突（id="1"不合法，data-index="1"虽合法但易混淆） - CSS 选择器匹配 →
[data-index="5"]可用，但[data-index^="row-"]更健壮 - JS 事件委托中提取 → 用
parseInt(e.target.getAttribute('data-index'))安全，比e.target.dataset.index少一层隐式转换风险
真正容易被忽略的点：当 data-index 用于定位或排序时，它不是 DOM 索引（childNodes[i]），也不是 CSS 伪类索引（:nth-child()），它只是你贴上去的标签——贴错位置、算错分组、漏更新，都会让整个交互链断裂。别指望浏览器帮你校验。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
