应使用 .attr('data-index', value) 设置并读取 data-index，因 .data() 不同步 DOM 属性，导致 CSS 选择器、服务端渲染等无法识别；动态列表批量赋值需用 Math.floor(i / groupSize) 映射组号。
直接用 data-index 就行，但必须配合正确的设置方式和读取逻辑，否则容易拿到 undefined 或旧缓存值。
为什么不能只靠 .data() 设置索引
.data() 是 jQuery 提供的语义化数据管理方法，但它只在首次读取时从 data-* 属性解析并缓存，后续用 .data('index') 修改的值不会反写回 DOM 属性 —— 这意味着其他脚本或 DevTools 看不到变化，且刷新后丢失。如果你只是想“存个数供 JS 用”，.data() 可以；但若需要元素自身携带可被 CSS 选择器、querySelector 或服务端渲染识别的索引，则必须走 .attr('data-index', value) 或原生 element.setAttribute('data-index', value)。
- 常见错误：写
$el.data('index', 5)后再用document.querySelector('[data-index="5"]')找不到元素 - 正确做法：设索引用
.attr('data-index', n)，读原始值也优先用.attr('data-index') - 如果后续要自动转数字类型，可用
parseInt($el.attr('data-index'), 10)，别依赖.data()的隐式转换
data-index 在动态列表中怎么批量赋值
每 3 个元素共用一个索引（如 3、3、3、6、6、6）这类需求，不能直接用循环变量 i，得做整除映射：
$('.item').each(function(i) {
const index = 3 * Math.floor(i / 3) + 3;
$(this).attr('data-index', index);
});
- 核心是
Math.floor(i / groupSize)得组号，再换算成目标值 - 若元素是动态插入的（比如点击“添加”后追加），这段代码必须在插入 DOM 后立即执行，不能只在页面加载时跑一次
- 避免用
for (let i = 0; i 配合 <code>list[i].setAttribute—— 如果list是querySelectorAll返回的静态 NodeList，它不响应后续 DOM 变更
原生 JS 里怎么安全读写 data-index
不用 jQuery 时，推荐统一走 dataset API，但要注意命名转换规则：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
- HTML 写
<div data-index="42">，JS 里读是 <code>el.dataset.index（自动转驼峰，data-user-id→el.dataset.userId） - 写入时
el.dataset.index = '42'等价于el.setAttribute('data-index', '42')，但dataset对null或undefined值会静默失败，建议加typeof value === 'string'校验 - 如果值可能含空格或特殊字符（如
"group-1a"），dataset仍可用；但若需保留前导零（"007"），必须用getAttribute('data-index')，因为dataset会自动 trim - CSS 中写
[data-index="2"] { color: red; }，但 HTML 里是data-index=" 2 "（带空格）或data-index="2.0"，匹配就失败 - 用
querySelectorAll('[data-index]')能拿到所有带该属性的元素，但querySelectorAll('[data-index^="2"]')这种前缀匹配，如果值是"2,5"也会被误抓 - 服务端渲染（如 SSR）时若
data-index值由后端注入，注意转义：避免data-index=""2""这类 HTML 实体导致 JS 读成字符串""2""
用 data-index 做 CSS 或查询时的坑
data-index 最常被用来配合 CSS 属性选择器或 JS 查询，但浏览器对属性值类型不校验，容易因格式错位失效：
真正麻烦的不是怎么写进去，而是当多个脚本都往同一个元素塞 data-index，又没约定覆盖规则时，谁最后写谁赢——这种隐式竞争很难 debug。
