遍历元素数组只会影响最后一个元素

Question

在我刚刚发现的一个项目中，有时迭代 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/

Answer 1

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

见JSFiddle

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

请参阅 JSFiddle 试试看

遍历元素数组只会影响最后一个元素

looping over array of elements just affects the last element

javascript

arrays

dom

loops