在元素数组上循环只会影响最后一个元素

looping over array of elements just affects the last element

本文关键字：元素 影响 最后一个 循环 数组      更新时间：2023-09-26

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

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

相关文章：