0

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

我尝试将其转换为数组 - 数组为空。尝试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);
}

这是控制台在谷歌浏览器中返回的结果：

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 事情，我是一个新手。

4

1 回答 1

0

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

于 2019-05-25T20:26:13.970 回答