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
结果：Abstract被移动到#top div，也被移动到数组的末尾（因为它现在是DOM中最后定位的图像）

迭代2（i = 1）：

i = 1
images1 = [ 0: People, 1: Sports, 2: Abstract ]
images1[i] = Sports
结果：运动被移动到#top div，并移动到数组的末尾。 People图片被忽略，因为它的索引是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。

为什么前向遍历for循环在javascript中无法正常工作

1 个答案: