循环遍历元素数组只会影响最后一个元素答案

【问题标题】：looping over array of elements just affects the last element循环遍历元素数组只会影响最后一个元素
【发布时间】：2015-03-24 15:18:52
【问题描述】：

在我刚刚发现的一个项目中，有时迭代一组 html 元素（并更改所有元素）只会影响最后一个元素。当我记录元素的属性时，我可以看到循环明确地处理了每个元素，但显然只有最后一个元素发生了变化。

谁能解释一下为什么？

我已经想通了，一个解决方案是使用 createElement() 和 appendChild() 而不是 insertHTML。我只是想了解为什么 javascript 会这样。

这是我的示例代码：

/* creating 5 elements and storing them into an array */
var elementArray = [];
for(var n = 0;n<5;n++)
{
    document.body.innerHTML += "<div id='elmt_"+n+"'>"+n+"</div>\n";
    elementArray[n] = document.getElementById("elmt_"+n);
}

/* loop over these 5 elements */
for(var n = 0;n<5;n++)
{
    console.log(elementArray[n].id); // logs: elmt_0 elmt_1 elmt_2 elmt_3 elmt_4
    elementArray[n].innerHTML = "test"; // changes just the last element (elmt_4) to "test"
}

我在这里创建了一个示例：http://jsfiddle.net/qwe44m1o/1/

【问题讨论】：

似乎在document.body.innerHTML += "<div id='elmt_"+n+"'>"+n+"</div>\n";浏览器刷新dom和指向元素之前添加新的不刷新

标签： javascript arrays loops dom

【解决方案1】：

1 - 在您的第二个循环中使用console.log(elementArray[n]); 表明此循环中的innerHTML 正在修改您的数组中的html，而不是您的文档中的html。这意味着您将 div 元素存储在数组中，而不是 快捷方式 到 document.getElementById("elmt_"+n)

见JSFiddle

2 - 如果你想存储一个快捷方式以便通过 ID 定位一个元素，你必须为 elementArray[n] = "document.getElementById('elmt_"+n+"')"; 添加引号，并将其与 eval 一起使用，如下所示：eval(elementArray[n]).innerHTML = n+"-test";

请参阅JSFiddle 进行此尝试

【讨论】：