JavaScript .children HTML collection length issues when looping

问题

I'm attempting to loop through an HTMLCollection produced from JavaScript's .children property using the following code:

var articles = data.children;
var newsGrid = document.getElementById('js-news__grid');

for (var i = 0; i < articles.length; i++) {
   articles[i].classList.add('loading');
   newsGrid.appendChild(articles[i]);
};

The data variable is a fragment of a successful XHR. When I run the loop, it only appends the first child and the loop ends, and when running console.log(articles); before the loop, it shows 2 HTML elements (like it should) but only has a length of 1. If I remove the loop and run console.log(articles); it shows the 2 HTML elements like before, BUT it now has a length of 2.

I've left out my XHR code for the sake of simplicity and due to the fact that the HTMLCollection that is produced from data.children looks correct. Here are the log messages:

[article.news__item, article.news__item]
0: article.news__item
1: article.news__item
length: 2
__proto__: HTMLCollection

[article.news__item, article.news__item]
0: article.news__item
length: 1
__proto__: HTMLCollection

回答1:

The problem is .children is a live collection, which will get updated as you move each child out of the container.

In your case, there are 2 children for data so articles.length is 2 when the loop is started, but after the first iteration you have relocated the first child which means the articles object is now contains only 1 element and i is 2 now the loop condition i < articles.length fails.

So one easy solution is to use a reverse loop

var articles = data.children;
var newsGrid = document.getElementById('js-news__grid');

for (var i = articles.length - 1; i >= 0; i--) {
    articles[i].classList.add('loading');
    newsGrid.appendChild(articles[i]);
};

Another solution will be is to convert articles to a normal array

var articles = [].slice.call(data.children);

Another approach as suggested by RobG is

var articles = data.children;
var newsGrid = document.getElementById('js-news__grid');

while (articles.length) {
    articles[0].classList.add('loading');
    newsGrid.appendChild(articles[0]);
};

来源：https://stackoverflow.com/questions/31332013/javascript-children-html-collection-length-issues-when-looping

标签

javascript

loops

xmlhttprequest

children