怪異的循環Javascript

Question

我有一個for循環來循環通過具有5個<li>元素的<ul>節點。 我正在嘗試為每個li元素創建一個div

當我嘗試將li元素附加到div ，for循環表現出奇怪

for (var i = 0; i < docNodes.children.length; i++) {
        var docs = document.createElement('div');
        docs.appendChild(docNodes.children[i]); //If this line is removed then it loops 5 times else it loops only 3 times
    }

有人可以讓我知道代碼有什么問題嗎

Answer 1

行為不是那么奇怪。 您需要在循環的每次迭代中更改docNodes.children的長度。 對於下一次迭代，它將再次檢查長度：

i | Length | i < length
0     5        true
1     4        true
2     3        true
3     2        false // Loop stops before the 4th iteration.

長度改變的原因是因為docs.appendChild實際上從其先前的父級中刪除了目標元素。

解決此問題的一種方法，它以相反的順序遍歷子級：

for (var i = docNodes.children.length - 1; i >= 0 ; i--) {
    var docs = document.createElement('div');
    docs.appendChild(docNodes.children[i]);
}

i | Length | i >= 0
4     5       true
3     4       true
2     3       true
1     2       true
0     1       true
-1    0       false // Loop stops before the 6th iteration. 

Answer 2

另外要指出的是，您可以在循環期間修改數組的長度。 在JavaScript中，最好使用Array.prototype.forEach而不是老式的for循環。

例如：

docNodes.children.forEach(function (child) {
    var docs = document.createElement('div');
    docs.appendChild(child);
});

Answer 3

嘗試這個。 並將類似的邏輯應用於您的代碼。

<div id="list"></div>

<script>
let children = ['1','2','3','4','5'];

for (var i = 0; i < children.length; i++) {
  var node = document.createElement("LI");
  var textnode = document.createTextNode(children[i]);
  node.appendChild(textnode);
  document.getElementById("list").appendChild(node);
}
</script>