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

Question

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

正如您将在下面的屏幕截图中看到的那样，它一直循环播放。

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) 它只允许 div 内的度假胜地代码与对应resortcode 请注意，它还多次循环 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"));
    };
};

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

For loop repeats each loop onto the next

html

javascript

loops

function

output