时间戳

首页 > 解决方案 > .forEach() 在第一次迭代后停止

javascript - .forEach() 在第一次迭代后停止

问题描述

第一次迭代后的简单.forEach()停止，具体取决于内容...

我的初始循环如下所示：

document.getElementsByClassName("app-form-to-js").forEach(function(node) {
    node.classList.remove("app-form-to-js");
    jsForms[node.id]=node.cloneNode(true);
    node.remove();
});

当第一个循环发生时，它并没有超出。
然后，经过一些调整，我设法让循环使用这段代码：

document.getElementsByClassName("app-form-to-js").forEach(function(node) {
    jsForms[node.id]=node.cloneNode(true);
    jsForms[node.id].classList.remove("app-form-to-js");
});

但是，在我使用node.classList.remove("app-form-to-js");或node.remove();循环的那一刻，
它总是会在第一次迭代后停止。

如果我改变节点，为什么循环在第一次迭代后停止（所以它至少迭代一次）？

标签： javascriptloops

解决方案

document.getElementsByClassName返回一个HTMLCollection，它没有forEach. 但是，您可以将其转换为一个数组，该数组确实定义了一个数组，方法Array.from()如下：

var collection = Array.from(document.getElementsByClassName("app-form-to-js"));
collection.forEach(function(node){...});

编辑：

正如@Preciel 向我指出的那样，该NodeList对象确实具有forEach()类似于数组的功能。如果您更愿意使用它，您可以替换document.getElementsByClassName("app-form-to-js")为document.querySelectorAll(".app-form-to-js")，这将返回 aNodeList而不是HTMLCollection

推荐阅读