為什么前向遍歷 for 循環在 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

結果：Abstract 被移動到#top div，也被移動到數組的末尾（因為它現在是 DOM 中最后一個定位的圖像）

迭代 2 (i = 1) ：

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

結果：Sports 被移動到#top div，並移動到數組的末尾。 人物圖片被忽略，因為它的索引是 0，我們已經跳過了那個

迭代 3 (i = 2) ：

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

結果：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 上工作。