Javascript для цикла странного поведения

1

У меня есть цикл 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
    }

Может ли кто-нибудь сообщить мне, что не так с кодом

  • 2
    docNodes.children.length изменяется, когда вы перемещаете li из ul в div .
  • 2
    Также вы не можете напрямую добавлять li в div, или, скорее, вы не должны
Показать ещё 1 комментарий
Теги:

3 ответа

4
Лучший ответ

Поведение не так странно. Вы изменяете длину 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.
Поделиться
  • 0
    как правильно добавить ребенка в div?
  • 0
    @firstpostcommenter: я обновил свой ответ.
Показать ещё 3 комментария
2

Как и другие моменты, вы изменяете длину массива во время цикла. В JavaScript лучше использовать Array.prototype.forEach вместо старомодного цикла.

Например:

docNodes.children.forEach(function (child) {
    var docs = document.createElement('div');
    docs.appendChild(child);
});
Поделиться
  • 0
    @Cerbrus это была ошибка копирования-вставки;)
-2

Попробуй это. И примените аналогичную логику в свой код.

<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>
Поделиться
  • 0
    Этот массив children функционально очень отличается от свойства children элемента DOM.
  • 0
    Я знаю. Но я пытался дать аналогичный ответ на вопрос. Это может помочь решить проблему
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню