Question

需要一些帮助。

我创建并将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';

}

您只能看到最后一个元素变黄。

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

谢谢！

Answer 1

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

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

您应该只设置innerHTML一次。

Answer 2

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

Answer 3

每次设置容器的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。
请记住使用i声明计数变量var以使它们在本地作用域，否则它们将作为全局范围。

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

3 个答案: