如何将嵌套数组数据按顺序注入同名类的多个 DOM 元素中

` 中，并为每个元素动态设置 `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', `     
${item.movie_name}
     
${item.date}
   `); }

? 关键注意事项：

• ❌ 避免在循环内重复查询 DOM（如 querySelectorAll 放在循环里）；
• ❌ 禁用 for…in 遍历数组（它遍历属性名，非数值索引，易出错；应使用 for…of 或传统 for (let i = 0; i
• ✅ 使用 Math.min() 限定循环上限，防止 data 项数 ≠ DOM 节点数时发生 undefined 错误；
• ✅ insertAdjacentHTML(‘beforeend’) 安全插入子内容，不破坏原有结构（如

  Hello

  保留）；

• ⚠️ 若需支持动态增删节点，建议改用模板字符串 + innerHTML 重绘，或结合 DocumentFragment 提升性能。

最终输出将严格匹配预期结构，每个 .fun 容器独占一条电影数据，data-id 准确绑定，语义清晰，可维护性强。