如何用jQuery/JavaScript循环提交多div id值及数组展示问题

兄弟，我太懂你踩的这个坑了！之前做项目也遇到过一模一样的情况，咱们一步步拆解问题、搞定它：

问题根源分析 #

1. 仅显示最后一条记录：十有八九是你用了var声明循环变量（比如var i或者var item），var是函数级作用域，循环结束后变量会保留最后一次迭代的值——哪怕控制台能同步输出每条记录，但DOM操作依赖这个变量时，最终都会指向最后一个元素。
2. 内容全部堆在首个区域：因为你一直在给同一个id的元素用append，append是往元素末尾追加内容，自然所有字段都挤在一起，而不是对应到各自的展示区域。

针对性解决方案 #

方案1：用let声明循环变量（ES6+ 最简洁） #

把循环里的变量换成let，它会创建块级作用域，每次迭代都会生成独立的变量副本，不会出现变量泄漏的问题。同时，我们可以动态创建每个数组元素对应的完整DOM结构，再一次性添加到容器里，避免内容堆叠：

// 假设你的数组结构是这样的
const productList = [
  { title: "商品A", price: 99, url: "/a" },
  { title: "商品B", price: 199, url: "/b" },
  { title: "商品C", price: 299, url: "/c" }
];

// 循环渲染
for (let i = 0; i < productList.length; i++) {
  const item = productList[i];
  // 构建单个商品的HTML片段
  const itemHtml = `
    <div class="product-card">
      <h4>${item.title}</h4>
      <p>售价：¥${item.price}</p>
      <a href="${item.url}">去购买</a>
    </div>
  `;
  // 把片段添加到容器中
  $("#product-container").append(itemHtml);
}

方案2：对应预定义的多个指定div #

如果页面上已经提前放好了多个用于展示的div（比如有3个div，类名都是product-item），那我们可以通过索引精准定位到每个div，再清空并填充内容：

for (let i = 0; i < productList.length; i++) {
  const item = productList[i];
  // 获取当前索引对应的目标div
  const targetDiv = $(".product-item").eq(i);
  // 先清空原有内容（如果需要）
  targetDiv.empty();
  // 填充对应字段
  targetDiv.find(".title").text(item.title);
  targetDiv.find(".price").text(`¥${item.price}`);
  targetDiv.find(".link").attr("href", item.url);
}

方案3：用闭包兼容旧环境（如果不能用ES6） #

如果你的项目还需要兼容不支持ES6的环境，那可以用闭包把每次迭代的元素包裹起来，形成独立作用域：

for (var i = 0; i < productList.length; i++) {
  // 用立即执行函数创建闭包
  (function(currentItem) {
    const itemHtml = `
      <div class="product-card">
        <h4>${currentItem.title}</h4>
        <p>售价：¥${currentItem.price}</p>
        <a href="${currentItem.url}">去购买</a>
      </div>
    `;
    $("#product-container").append(itemHtml);
  })(productList[i]); // 把当前迭代的元素传进去
}

为什么之前清空变量没用？ #

你之前在循环内清空变量，但var声明的变量作用域是整个函数，清空只是改变了当前迭代的值，但循环结束后还是会被最后一次迭代覆盖，用let或者闭包才能从根源上解决作用域问题。

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