本文讲解如何将 javascript 中的嵌套对象数组（如电影列表）按索引顺序精准渲染到多个具有相同 class（如 `.fun`）的 `
` 中，并为每个元素动态设置 `data-id` 及插入结构化内容。
在前端开发中，常需将结构化数据（如 JSON 数组）映射到页面上多个语义相同的容器中——例如为每部电影生成一个卡片。但若直接使用嵌套循环（如 forEach 内套 for），容易因闭包或引用错误导致所有元素被赋予最后一项数据（正如提问中出现的 dataset.id 全部变成 2 的问题）。根本原因在于：未建立数据项与 DOM 节点之间的一一对应关系，且误用条件判断替代位置映射。
✅ 正确做法是：利用数组索引实现严格的位置对齐。假设 data 数组与目标 DOM 节点集合（通过 document.querySelectorAll('.fun') 获取）长度一致（或取最小长度以保安全），即可通过单层 for 循环，用同一索引 i 同时访问 data[i] 和 allFuns[i]，确保逐项、有序、无干扰地写入。
以下是推荐实现（含健壮性增强）：
const data = [
{ id: 1, movie_name: "last holiday", date: "2023-10-29", length: ["1 hour 30"] },
{ id: 2, movie_name: "pitch perfect", date: "2023-04-24", length: ["2 hours"] }
];
const allFuns = document.querySelectorAll('.fun');
const len = Math.min(data.length, allFuns.length); // 防止越界
for (let i = 0; i < len; i++) {
const item = data[i];
const el = allFuns[i];
// 设置 data-id 属性
el.dataset.id = item.id;
// 插入结构化 HTML（注意：题干期望 h3/h4，此处按实际需求调整）
el.insertAdjacentHTML('beforeend', `
<h3 class="cardTitle">${item.movie_name}</h3>
<h4 class="cardSubtitle">${item.date}</h4>
`);
}? 关键注意事项：
- ❌ 避免在循环内重复查询 DOM（如 querySelectorAll 放在循环里）；
- ❌ 禁用 for...in 遍历数组（它遍历属性名，非数值索引，易出错；应使用 for...of 或传统 for (let i = 0; i < arr.length; i++)）；
- ✅ 使用 Math.min() 限定循环上限，防止 data 项数 ≠ DOM 节点数时发生 undefined 错误；
- ✅ insertAdjacentHTML('beforeend') 安全插入子内容，不破坏原有结构（如 <p>Hello</p> 保留）；
- ⚠️ 若需支持动态增删节点，建议改用模板字符串 + innerHTML 重绘，或结合 DocumentFragment 提升性能。
最终输出将严格匹配预期结构，每个 .fun 容器独占一条电影数据，data-id 准确绑定，语义清晰，可维护性强。
