如何获取指定classname的被选中input元素的对应索引？

实现方案 #

你调用forEach遍历querySelectorAll返回的NodeList时，直接使用回调函数的第二个参数（当前遍历项的索引）即可，修改后的代码如下：

document.querySelectorAll('.class-name').forEach((item, index) => {
    item.addEventListener('change', event => {
        // index 就是当前触发事件的input在同class元素中的索引，从0开始计数
        console.log(index);
    })
})

补充说明 #

• 上述方案的索引和document.querySelectorAll('.class-name')返回的元素顺序一一对应，默认和元素在DOM中从上到下的排列顺序一致，性能更高，适合元素不会动态增删的场景
• 如果后续会动态新增/删除同class的input元素，可以在事件触发时实时计算索引，保证索引准确性：

document.querySelectorAll('.class-name').forEach(item => {
    item.addEventListener('change', event => {
        const allSameClassInputs = Array.from(document.querySelectorAll('.class-name'));
        const currentIndex = allSameClassInputs.indexOf(event.currentTarget);
        console.log(currentIndex);
    })
})

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