JavaScript循环渲染数组数据均显示第一条问题求助及代码修复

错误原因 #

每次循环执行$(".away_team").text(...)这类代码时，jQuery会选中页面上所有带该类名的元素，而非仅刚添加的.box内的对应元素。循环结束后，所有元素会被最后一次循环的数据批量覆盖，最终呈现出所有容器显示同一条数据的问题。

修复方案 #

方案1：先填充数据再生成DOM添加到页面 #

这种方式更高效，避免重复DOM查询：

$.ajax(settings).done(function (response) {
    // 遍历每条数据，直接生成带内容的box
    response.data.forEach(item => {
        const box = `
              <div class='box'>
                <h4>Away Team</h4>
                <div class="away_team">${item.away_team}</div><br>
                <h4>Country</h4>
                <div class="competition_cluster">${item.competition_cluster}</div><br>
                <h4>Competition name</h4>
                <div class="competition_name">${item.competition_name}</div><br>
                <h4>Federation</h4>
                <div class="federation">${item.federation}</div><br>
                <h4>Home Team</h4>
                <div class="home_team">${item.home_team}</div><br>
                <h4>Has expired?</h4>
                <div class="is_expired">${item.is_expired}</div><br>
              </div>`;
        $('body').append(box);
    });
});

方案2：添加容器后仅修改当前容器内的子元素 #

如果需要保留模板结构，可通过限定选择器范围实现：

$.ajax(settings).done(function (response) {
    const boxTemplate = `
          <div class='box'>
            <h4>Away Team</h4>
            <div class="away_team"></div><br>
            <h4>Country</h4>
            <div class="competition_cluster"></div><br>
            <h4>Competition name</h4>
            <div class="competition_name"></div><br>
            <h4>Federation</h4>
            <div class="federation"></div><br>
            <h4>Home Team</h4>
            <div class="home_team"></div><br>
            <h4>Has expired?</h4>
            <div class="is_expired"></div><br>
          </div>`;

    response.data.forEach(item => {
        // 创建模板元素并添加到页面，保存当前box的jQuery对象
        const $box = $(boxTemplate).appendTo('body');
        // 仅修改当前box内的子元素
        $box.find(".away_team").text(item.away_team);
        $box.find(".competition_cluster").text(item.competition_cluster);
        $box.find(".competition_name").text(item.competition_name);
        $box.find(".federation").text(item.federation);
        $box.find(".home_team").text(item.home_team);
        $box.find(".is_expired").text(item.is_expired);
    });
});

额外优化建议 #

• 替换var i为let i或直接使用forEach循环，避免变量提升导致的循环变量问题
• 可提前在HTML中创建父容器（如<div id="boxes-container"></div>），将所有.box添加到该容器内，方便后续样式控制和DOM管理

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