JavaScript在第二和第四循環中忽略appendChild

Question

這是成功完成我正在嘗試做的小提琴： http : //jsfiddle.net/WoofurrBro/qcf4qcm6/2/

這是我的設置不起作用。

 function align() { var x = document.getElementById('container').offsetWidth; var y = document.getElementsByClassName('box')[0].offsetWidth; var z = Math.floor(x / y); // finds # of columns for (var i = 0; i < z; i++) { document.getElementById('container').innerHTML += '<div class=col style="width:' + y + 'px;float:left;"></div>'; }; // creates columns var columns = document.getElementsByClassName('col'); var boxes = document.getElementsByClassName('box'); // variables for later use /////////////////////////////////////////////////////////////////////////////// for (var i = 0; i < boxes.length; i++) { var minIndex; var column = []; // minIndex = shortest column, column[] to sort NodeList for (var iii = 0; iii < columns.length; iii++) { column[iii] = columns[iii].clientHeight; }; // converts columns[] (NodeList) to column[] (Array) column.sort(function (a, b) { return a - b; }); // sorts the column[] array for (var ii = 0; ii < columns.length; ii++) { if (column[0] == columns[ii].clientHeight) { minIndex = ii; break; }; }; // picks the first item in the column[] array (shortest) and finds the index of it in columns[] NodeList boxes[i].style.visibility = 'visible'; //ALSO, placing this under the appendChild string causes weird bugs (?) boxes[i].innerHTML += i + 'h'; columns[minIndex].appendChild(boxes[i]); // !!!!!!!!!!!!!! SEEMS TO IGNORE THIS appendChild //places them and adds identification }; /////////////////////////////////////////////////////////////////////////////// }; window.onload = align; 

  * { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor:default; margin:0px; padding:0px; } html { background-color:#20293F; } #title { text-align:center; padding-top:40px; font-size:60px; margin-bottom:10px; } #description { font-size:14px; text-align:center; margin:0 auto 30px auto; max-width:450px; } .box { width:250px; word-wrap:break-word; background-color:rgba(0, 0, 0, 0.30); margin:10px 0 10px 0; } col { margin:0 10px 0 10px; } #containerwrap { background-color:rgba(0, 0, 0, 0.30); min-width:800px; width:100%; } #container { overflow:hidden; width:800px; margin:0 auto; } .postTitle { text-align:center; font-size:30px; color:#5F70A6; } .postBody { padding:10px; font-size:12px; color:#5F70A6; } 

 <div id="containerwrap"> <div id="container"> <div class="box"> <h2 class="postTitle">11 boots</h2> <div class="postBody"> <p>11 bbooots</p> </div> </div> <div class="box"> <h2 class="postTitle"></h2> <div class="postBody"> <p>22 sweg</p> </div> </div> <div class="box"> <h2 class="postTitle"></h2> <div class="postBody"> <p><span></span><span></span><span>33 thisisadivthingwithoutanyspanssodontevenexpectthehtmltogeneratespanslikeitdidlasttimebitchtimetocopythisshitsorries<span>divthingwithoutanyspanssodontevenexpectthehtmltogeneratespanslikeitdidlasttimebitchtimeto</span><span>divthingwithoutanyspanssodontevenexpectthehtmltogeneratespanslikeitdidlasttimebitchtimeto</span><span>divthingwithoutanyspanssodontevenexpectthehtmltogeneratespanslikeitdidlasttimebitchtimeto</span><span>divthingwithoutanyspanssodontevenexpectthehtmltogeneratespanslikeitdidlasttimebitchtimeto</span><span>divthingwithoutanyspanssodontevenexpectthehtmltogeneratespanslikeitdidlasttimebitchtimeto</span><span>divthingwithoutanyspanssodontevenexpectthehtmltogeneratespanslikeitdidlasttimebitchtimeto</span><span>divthingwithoutanyspanssodontevenexpectthehtmltogeneratespanslikeitdidlasttimebitchtimeto</span><span>divthingwithoutanyspanssodontevenexpectthehtmltogeneratespanslikeitdidlasttimebitchtimeto</span><span>divthingwithoutanyspanssodontevenexpectthehtmltogeneratespanslikeitdidlasttimebitchtimeto</span><span>divthingwithoutanyspanssodontevenexpectthehtmltogeneratespanslikeitdidlasttimebitchtimeto</span><span>divthingwithoutanyspanssodontevenexpectthehtmltogeneratespanslikeitdidlasttimebitchtimeto</span><span>divthingwithoutanyspanssodontevenexpectthehtmltogeneratespanslikeitdidlasttimebitchtimeto</span><span>divthingwithoutanyspanssodontevenexpectthehtmltogeneratespanslikeitdidlasttimebitchtimeto</span><span>divthingwithoutanyspanssodontevenexpectthehtmltogeneratespanslikeitdidlasttimebitchtimeto</span><span>divthingwithoutanyspanssodontevenexpectthehtmltogeneratespanslikeitdidlasttimebitchtimeto</span><span>divthingwithoutanyspanssodontevenexpectthehtmltogeneratespanslikeitdidlasttimebitchtimeto</span></span> </p> </div> </div> <div class="box"> <h2 class="postTitle">44 ether</h2> <div class="postBody"> <p>44 infinite, silk-smooth darkness covers your eyes as you float in the skies <br>lightning bolts of pleasure and happiness strike you, through your senses, as each rain drop pops silently on your skin <br>the windy silence cloak guards your peace as you rest in the sky, floating upwards and feeling the rain drops pop and the air flowing around you with kind love, giving you calmness and calmness again <br>this sea of magic around you might not be, but does it matter, if that's what's on your mind. you let it stay and you float, you float away, as you let it be <br>and it strikes you that you are where your mind is and your mind is here, here in this magic place, as the raindrops pop lightning on your skin, you allow it to be, might you never leave, but if you ever left, might you come back to be here once more <br>just close your eyes</p> </div> </div> </div> </div> 

在代碼運行之前，方框以11 22 33 44的順序開始，並且我希望腳本動態創建三列，並一次將它們放置在每一步中最短的列中。

但是，只有兩個盒子放在列中。 22和44框被完全忽略了，我不知道為什么。

我該怎么做才能使其正常工作？

Answer 1

appendChild()不會被忽略。 它被重復用於同一元素。

如果您查看11框的底角，則會看到：

0h2h3h

您的i + "h"文本將被添加到同一框3次，這意味着boxes[i]在循環的3次迭代期間引用了同一框 。

怎么會這樣？ 這里的問題是boxes不是數組。 這是一個HTMLCollection ，其內容順序反映了當前DOM中元素的順序：

HTML DOM中的HTMLCollection是實時的； 當基礎文檔更改時，它會自動更新。

資源

所以這是正在發生的事情：

您的盒子按順序開始：

[original boxes] 11 22 33 44   [columns]

因此，在第一次迭代中， boxes[i]是11個box，並將其添加到第一列。 現在的順序是：

[original boxes] 22 33 44      [columns] 11

在下一次迭代中， boxes[i] （又名boxes[1] ）是33個盒子，並將其添加到第二列，其順序為：

[original boxes] 22 44 11      [columns] 11 33

在下一次迭代中， boxes[i] （= boxes[2] ） 再次是11 box，並將其附加到第三列。 現在的訂單是：

[original boxes] 22 44         [columns] 33 11

在最后一次迭代中， boxes[i]仍然是11個盒子，並將其追加到第一列：

[original boxes] 22 44         [columns] 11 33

到此為止。

---

為什么你的jsfiddle的作品和你的tumblr頁沒有的原因是，在你的tumblr頁，目標容器是盒子起始位置后 ，但在的jsfiddle，容器是盒子之前 ，所以不為所動箱保持其序一直定位。

如果將容器移動到盒子后面，這就是您的jsfiddle所做的事情：

http://jsfiddle.net/qcf4qcm6/3/

---

解決方法很簡單。 只需將boxes轉換為數組，然后再開始使用它：

 var boxes = document.getElementsByClassName('box'); boxes = Array.prototype.slice.apply(boxes); 

這樣做，一切都會正常進行。

http://jsfiddle.net/myqakknr/2/