Javascript for 循环表现奇怪

Question

我有一个 for循环遍历节点 <ul>有 5 <li>元素。我正在尝试创建一个 div对于每一个 li元素

当我尝试附加 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.