如何使用querySelectorAll结合forEach获取DOM元素的索引？

直接利用NodeList.prototype.forEach的第二个参数索引即可，这是最原生、高效的实现方式，无需额外转换数组或手动计数。

修改后的代码示例 #

function queryFunc(query, func){
    document.querySelectorAll(query).forEach(func);
};

queryFunc(".fooBar", function(e, index){
    // 这里的index就是当前元素在NodeList中的索引
    console.log(`当前元素索引：${index}`);
});

核心说明 #

• NodeList的forEach方法与数组forEach参数规则一致，回调函数默认接收三个参数：当前遍历的元素、当前元素的索引、遍历的原NodeList对象
• 无需将querySelectorAll返回的NodeList转换为数组（如Array.from()或扩展运算符[...]），原生forEach已足够满足需求，性能更优
• 若需要从1开始计数的索引，直接在回调中使用index + 1即可

内容的提问来源于stack exchange，提问作者Austin Griner