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)

请参阅JSFiddle

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

请参阅JSFiddle了解此尝试

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

1 个答案: