For 循环将每个循环重复到下一个循环

Question

我正在尝试使用循环动态调整document.getElementById(divID)。这似乎工作......排序

它一直在循环，如下面的屏幕截图所示。

let searchresult = function(response) {
    let output ="";
    for (let j = 0; j < response.length; j++) {
        let divID = response[j].resortcode + 'results';
        let container = document.getElementById(divID);

        output +=
            `
            <div class="${response[j].resortcode} ${response[j].roomcode}">
            </div>
            `;
        console.log(container);
        $(container).html(output);
    }
};

我将容器 div 设置为 response[j].resortcode，但我认为通过使用 document.getElementById(divID)，它只允许在具有相应 resortcode 的 div 中使用该度假村代码 请注意，它还不止一次地循环getElementByID。

我希望输出到我的 html 文件中的预制 div id（它确实如此，它只是不断重复）。然后将结果<div class=${response[j].resortcode}"></div> 循环到相应的预制 div 中。这是所需结果的 Photoshop 版本：

编辑：添加原始响应的控制台。

非常感谢任何帮助。

Answer 1

您的变量 output 会在每次迭代时添加并且永远不会重置，因此当您将 html 设置为 output 时，它包含之前的每次迭代。

您可以通过获取 innerHTML 并添加到而不是使用 output 变量来解决此问题。

您还可以将resortcode 存储到Set (a special kind of array that does not allow duplication of elements) 中，然后在最后将console.log 存储在这些容器中。

let searchresult = function(response) {
    let resortCodes = new Set();
    for (let j = 0; j < response.length; j++) {
        resortCodes.add(response[j].resortcode); // add only happens if the resortcode isn't already in resortCodes
        let divID = response[j].resortcode + 'results';
        let container = document.getElementById(divID);

        container.innerHTML += `
            <div class="${response[j].resortcode}">
            <div class="roominfo"><p class="roomtitle"> ${response[j].roomname} - ${response[j].viewname}</p>
            </div>
            </div>
            `;
    }

    resortCodes.forEach(function (resortCode) {
        console.log(document.getElementById(resortCode + "results"));
    };
};