forEach 循环仅创建最后一个 DOM 元素答案

【问题标题】：forEach loop only creating last DOM element [duplicate]forEach 循环仅创建最后一个 DOM 元素
【发布时间】：2020-12-10 19:11:01
【问题描述】：

所以我正在创建一个笔记应用程序，将笔记保存到本地存储中。重新加载页面时，应该加载这些注释并为每个注释创建一个列表元素。问题是它只创建最后一项。我知道字符串被推送到本地存储，并且我知道 forEach 正在按预期循环遍历它们，所以问题必须在于如何操作 DOM。这是代码。

每个人：

notes.forEach(function(index){
        listText.innerHTML = index;
        listDiv.appendChild(listText);
        li.appendChild(listDiv);
        li.appendChild(delButton);
        document.querySelector("ul").appendChild(li);
    });

DOM 变量：

// UI VARIABLES
    const li = document.createElement("li");
    const listDiv = document.createElement("div");
    const listText = document.createElement("div");
    listDiv.className = "listDiv";
    listText.className = "listText";
// DELETE BUTTON
    const delButton = document.createElement("button");
    delButton.innerHTML = "X";
    delButton.className = "delButton";

【问题讨论】：

只有一个元素循环附加到列表中。
appendChild 的行为在the documentation 中也有很好的描述。

标签： javascript html foreach local-storage

【解决方案1】：

你在这里拥有的是：

let notes = ['a','b','c','d'];

// UI VARIABLES
    const li = document.createElement("li");
    const listDiv = document.createElement("div");
    const listText = document.createElement("div");
    listDiv.className = "listDiv";
    listText.className = "listText";
// DELETE BUTTON
    const delButton = document.createElement("button");
    delButton.innerHTML = "X";
    delButton.className = "delButton";
    
    notes.forEach(function(index){
        listText.innerHTML = index;
        listDiv.appendChild(listText);
        li.appendChild(listDiv);
        li.appendChild(delButton);
        document.querySelector("ul").appendChild(li);
    });

<ul>

</ul>

它只显示最后一个元素的原因是你只创建了一次父 div，并且每次forEach 回调函数被触发时，你都会用新数据填充它。

您需要做的是在 forEach 回调函数中创建这些元素：

let notes = ['a','b','c','d'];

notes.forEach(function(index){
// UI VARIABLES
    const li = document.createElement("li");
    const listDiv = document.createElement("div");
    const listText = document.createElement("div");
    listDiv.className = "listDiv";
    listText.className = "listText";
// DELETE BUTTON
    const delButton = document.createElement("button");
    delButton.innerHTML = "X";
    delButton.className = "delButton";
    
    
        listText.innerHTML = index;
        listDiv.appendChild(listText);
        li.appendChild(listDiv);
        li.appendChild(delButton);
        document.querySelector("ul").appendChild(li);
    });

<ul>

</ul>

【讨论】：

【解决方案2】：

目前没有时间正确阅读此内容，我猜它与“关闭错误/延迟解决”有关：

例如当您使用在将要使用该变量的范围之外声明的变量时，它将使用该变量在运行时所具有的值。在设置闭包时它不会获得值的副本。

至少是常规 JScript 'for' 循环的一种解决方案 - 改为在 IIFE 中使用/包装它；例如

    //  This will be referenced in another (/following) scope
    var dataValsArray = [
        '...',
        '...',
        '...'
    ];


    for (var idx = 0; idx < dataValsArray.length; idx ++) {
        // IIFE
        (function() {
            var currEle = dataValsArray[idx];

            ...  // CODE HERE
        })();
    }

【讨论】：

不幸的是，这不是当前的问题。请考虑在尝试回答之前等待完整阅读问题。不过谢谢！