Question

我有一个for循环来遍历具有5个<ul>元素的<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.

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>

Javascript for循环表现奇怪

3 个答案: