Question

我正在尝试使用webpack和Babel建立一个网站。我正在尝试使用jQuery将“ onclick”事件分配给表中的所有项目。我正在使用getElementsByClassName选择所有“可点击行”表格行项目，该项目返回HTMLCollection，但是调用其中的.length时，它将返回0。将集合打印到控制台会显示其中包含项目它。这使我想到这是一个通天塔问题。

我尝试将其转换为数组-数组为空。尝试document.querySelectorAll();返回空的NodeList和...运算符，尝试使用.forEach()并尝试使用HTMLCollection.prototype.forEach = Array.prototype.forEach;都无处可寻。

这是我正在使用的代码：

$('document').ready(getTableRows);

function getTableRows() {
    let tableRows = document.getElementsByClassName("clickable-row");
    console.log(tableRows);
    console.log("Length of this collection = " + tableRows.length);
    let array = Array.from(tableRows);
    console.log("Converted to array");
    console.log(array);
}

以下是控制台在Google chrome中返回的结果：

HTMLCollection []
    0: tr.clickable-row
    1: tr.clickable-row
    2: tr.clickable-row
    3: tr.clickable-row
    4: tr.clickable-row
    5: tr.clickable-row
    6: tr.clickable-row
    7: tr.clickable-row
    8: tr.clickable-row
    9: tr.clickable-row
    length: 10
    __proto__: HTMLCollection

Length of this collection = 0

Converted to array
[]
    length: 0
    __proto__: Array(0)

我尝试在jsfiddle中重新创建相同的东西，但是没有引起相同的行为，这使我更加想起这是Babel / webpack的事情。 http://jsfiddle.net/h2emxdf1/2/

很抱歉，如果我将所有内容混在一起，但如果涉及到整个Webpack，我就是一个新手。

Answer 1

由于@str，我意识到js异步执行函数，这确实是我的问题。所以我创建了一个回调。现在它可以正常工作了。

如何遍历Javascript / Babel中的HTMLCollection

1 个答案: