如何用JavaScript遍历对象数组并将内容对应插入指定class的div

问题根源 #

你的问题核心是循环逻辑错误+变量作用域误解：如果在遍历数据数组时嵌套循环所有.fun div并设置dataset.id，本质是把每一个数据项的id都覆盖了所有div的id，最后一次循环自然会把所有div的id设为数组最后一项的id。

最优实现方案 #

根据你的需求，分两种场景给出高效写法：

场景1：页面已提前存在对应数量的.fun div

先获取所有.fun div集合，通过forEach的索引直接和数组项一一对应，避免嵌套循环：

<!-- 示例HTML结构 -->
<div class="fun"></div>
<div class="fun"></div>
<div class="fun"></div>

// 示例JSON数组
const dataList = [
  { id: 1, content: "第一条内容" },
  { id: 2, content: "第二条内容" },
  { id: 3, content: "第三条内容" }
];

// 获取所有.fun div
const funDivs = document.querySelectorAll('.fun');

// 遍历数组，通过索引对应到每个div
dataList.forEach((item, index) => {
  // 加判断避免数组和div数量不一致导致的错误
  if (!funDivs[index]) return;
  
  const targetDiv = funDivs[index];
  targetDiv.dataset.id = item.id;
  // 填充你需要的内容，比如文本
  targetDiv.textContent = item.content;
});

场景2：需要根据数组动态生成.fun div

如果页面没有提前创建div，直接在遍历数组时批量创建元素，用DocumentFragment减少DOM操作次数（性能更优）：

const dataList = [/* 你的JSON数组 */];
// 替换成实际的父容器选择器
const parentContainer = document.getElementById('content-container');
// 创建文档片段，一次性插入DOM
const fragment = document.createDocumentFragment();

dataList.forEach(item => {
  const div = document.createElement('div');
  div.className = 'fun';
  div.dataset.id = item.id;
  div.textContent = item.content; // 替换成你要输出的内容
  fragment.appendChild(div);
});

// 最后一次性把所有div插入页面
parentContainer.appendChild(fragment);

错误写法示例（为什么会出问题） #

你之前的代码大概率是类似这样的嵌套循环，导致所有div被反复覆盖：

// ❌ 错误写法
const funDivs = document.querySelectorAll('.fun');
dataList.forEach(item => {
  // 每次遍历数据项，都把所有.fun div的id设为当前item.id
  funDivs.forEach(div => {
    div.dataset.id = item.id;
  });
});

这种写法会让每一条数据都覆盖所有div的id，最后一次循环执行完，所有div的id自然都是数组最后一项的id。

额外注意事项 #

• 如果数组长度和提前存在的.fun div数量不一致，建议加判断逻辑（比如多余的div隐藏，或者不足的话动态创建）
• 如果后续需要通过div反向查找对应数据，可以用Map存储关联关系：const divToData = new Map(); 遍历的时候执行divToData.set(targetDiv, item);

内容的提问来源于stack exchange，提问作者CodeLover