JavaScript .children HTML 循环时集合长度问题

Question

我正在尝试使用以下代码遍历从 JavaScript 的 .children 属性生成的 HTML 集合：

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]);
};

data 变量是一个成功的 XHR 的片段。当我运行循环时，它只附加第一个子元素并且循环结束，当运行ning console.log(articles); 循环之前，它显示 2 HTML 元素（喜欢它应该）但只有 1 的长度。如果我删除循环和运行 console.log(articles); 它会像以前一样显示 2 HTML 元素，但它现在的长度为 2。

为了简单起见，我省略了 XHR 代码，因为从 data.children 生成的 HTMLCollection 看起来是正确的。以下是日志消息：

[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

Answer 1

问题是 .children 是一个实时集合，当您将每个 child 移出容器时，它会得到更新。

在你的例子中，data 有 2 个 children，所以当循环开始时 articles.length 是 2，但是在第一次迭代之后你已经重新定位了第一个 child 这意味着 articles object 现在只包含 1 个元素，而 i 是 2 现在循环条件 i < articles.length 失败。

所以一个简单的解决方案是使用反向循环

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]);
};

另一种解决方案是将 articles 转换为普通数组

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

RobG 建议的另一种方法是

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

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

JavaScript .children HTML 循环时集合长度问题

JavaScript .children HTML collection length issues when looping

javascript

children

loops

xmlhttprequest