在数组中存储DOM元素：奇怪的行为？

我创建并将DOM元素存储在数组中。

后来，当我想使用它们时，它们就像不可用，除了最后一个。

下面是一个简单的真的代码来说明： http://jsfiddle.net/rd2nzk4L/

var list = new Array(); 

    // first loop create and store elements 
    for (i = 1; i <= 5; i++) { 

     var html = '<div id="test-' + i + '" style="float: left; border: 2px solid black; width: 50px; height: 50px; margin: 5px;">' + i + '</div>'; 

     document.getElementById('test').innerHTML += html; 

     var element = document.getElementById('test-' + i); 

     //console.log(element); 

     list.push(element); 

} 

// second loop use stored elements 
for (index in list) { 

    //console.log(list[ index ]); 

    list[ index ].style.backgroundColor = 'yellow'; 

}

你只能看到最后一个元素变成了黄色。

如果有人有想法，我会非常感激。

谢谢！

来源

2015-04-22 nico_dindon

不使用......在使用数组，因为它会遍历数组对象的其他属性，除非你做额外的与hasOwnProperty检查等 –

设置容器的innerHTML将重新创建其整个DOM树。

因此，以前迭代中的所有旧元素都不再附加到DOM。

您应该只设置一次innerHTML。

来源

2015-04-22 16:33:25 SLaks

您好，感谢您的权利，我现在:) –

因为您没有创建元素，所以无法使用您正在使用的选择器找到它们。尝试使用document.createElement，然后div.appendChild（元素）

来源

2015-04-22 16:35:55

得到它嘿，感谢你的回答。我工作:) –

每当您设置容器的innerHTML时，它会销毁所有子元素并重新创建它们。这是一个问题，因为现在你的数组包含对不再存在的元素的引用，除了最终的迭代之外。

解决方案是使用DOM元素，而不是原始HTML。

Fiddle

var list = []; 

var container = document.getElementById("test"); 

// first loop create and store elements 
for (var i = 1; i <= 5; i++) { 

    var element = document.createElement('div'); 
    element.id = 'test-' + i; 
    element.className = 'mydiv'; 
    element.appendChild(document.createTextNode(i)); 

    container.appendChild(element); 

    list.push(element); 
} 

// second loop use stored elements 
for (var x=0; x<list.length; x++) { 
    list[ x ].style.backgroundColor = 'yellow'; 
}

旁注：

的for..in可以在阵列中使用，但你需要使用hasOwnProperty，或只使用一个基本的for循环像上面。
var list = \[\]优于var list = new Array() - more info。
请记住使用var来声明像i这样的计数变量，以使它们在本地范围内，否则它们将被全局范围化。

来源

2015-04-22 16:41:58 MrCode

感谢你，这真的很有用！很好的解释。 –

在数组中存储DOM元素：奇怪的行为？

回答

相关问题