为什么循环的正向遍历无法在JavaScript中正常工作

Question

这正常工作：

for(var i = images1.length - 1; i >= 0; i--)
  document.getElementById("top").appendChild(images1[i]);

这不起作用：

for(var i = 0; i < images1.length; i++)
  document.getElementById("top").appendChild(images1[i]);

为什么上述循环无法正常工作。

Answer 1

问题是<div id="top">放置在图片下方（根据测试猜测）。因此，将图片移到#top时，它们在DOM中的位置会随着每次迭代而变化，并且随着数组中的图像根据DOM位置而有序排列，数组的顺序也会改变，并且这会带来所有麻烦。

例如，请参见以下代码（也可以在此JSFiddle上找到该代码以进行测试）：

images1 = document.getElementsByTagName("img");

/*
//This works properly:
for(var i = images1.length - 1; i >= 0; i--)
  document.getElementById("top").appendChild(images1[i]);
*/

//This is not working:
for(var i = 0; i < images1.length; i++) {
    document.getElementById("top").appendChild(images1[i]);
}

<img src="http://lorempixel.com/400/200/abstract/" alt="Abstract Pic" />
<img src="http://lorempixel.com/400/200/people/" alt="People Pic" />
<img src="http://lorempixel.com/400/200/sports/" alt="Sports Pic" />

<div id="top"></div>

如果检查元素，您会看到人民的图片没有移动，并且仍然在#top div之外。但是，如果您取消注释第一个循环，然后注释第二个循环，它将按预期工作。

这是因为我们将以相反的顺序移动图片（从最后一张到第一张），它们之间的相对位置不会改变，然后images数组也不会随之改变（移动所有图片成功放入#top）。

如上所述，此行为的根本原因是images1数组在每次迭代中都会更改。首次调用时（第0行），其值为：

[ 0: Abstract, 1: People, 2: Sports]

但是数组的顺序会随着页面上图片的顺序而变化。以下是逐步输入的值（输入迭代时）：

迭代1（i = 0）：

i = 0
images1 = [ 0: Abstract, 1: People, 2: Sports ]
images1[i] = Abstract

结果：摘要被移动到#top div以及数组的末尾（因为它现在是DOM中最后定位的图像）

迭代2（i = 1）：

i = 1
images1 = [ 0: People, 1: Sports, 2: Abstract ]
images1[i] = Sports

结果：体育项目移至#top div并移至数组末尾。 “人物”图片被忽略，因为它的索引为0，我们已经跳过了那个]

迭代3（i = 2）

：

i = 2
images1 = [ 0: People, 1: Abstract, 2: Sports ]
images1[i] = Sports
结果：运动再次移至#top div的末尾（保持在相同位置），并且数组保持不变。

---

一种解决方法：将图片放在top div下。这样，图片的顺序将始终相同，并且两个循环都可以正常工作：（另请参见此JSFiddle）

images1 = document.getElementsByTagName("img");

/*
//This works properly:
for(var i = images1.length - 1; i >= 0; i--)
  document.getElementById("top").appendChild(images1[i]);
*/

//This is not working:
for(var i = 0; i < images1.length; i++) {
    document.getElementById("top").appendChild(images1[i]);
}
<div id="top"></div>

<img src="http://lorempixel.com/400/200/abstract/" alt="Abstract Pic" />
<img src="http://lorempixel.com/400/200/people/" alt="People Pic" />
<img src="http://lorempixel.com/400/200/sports/" alt="Sports Pic" />

---

如果无法仅通过JavaScript更改元素的位置，则可以创建images1数组的静态副本，然后在循环中使用该副本。像这样的东西：

// create a static duplicate that will not change with the DOM changes
for (var x = 0; x < images1.length; x++) {
    auximages1.push(images1[x]);
}
您可以看到正在处理其他JSFiddle。