如何获取类名为editar的被点击按钮对应的顺序索引值

DevOps 小满

2026-9-24

解决方案

你可以通过以下两种方式实现获取点击的editar类按钮的索引：

方法1：遍历绑定事件（适合按钮固定的场景）

将document.getElementsByClassName返回的类数组转为普通数组，遍历的时候直接绑定事件，回调里就能拿到对应的索引：

// 获取所有editar类按钮并转为数组
const editBtns = Array.from(document.getElementsByClassName('editar'))
// 遍历绑定点击事件
editBtns.forEach((btn, index) => {
  btn.addEventListener('click', () => {
    // 这里的index就是你要的索引，第一个按钮为0，第二个为1
    console.log('当前点击索引：', index)
  })
})

方法2：事件委托（适合表格行动态增删的场景）

不需要给每个按钮单独绑定事件，通过父级元素监听点击判断目标元素，性能更好：

document.addEventListener('click', e => {
  // 仅当点击的是editar类按钮时执行逻辑
  if (e.target.classList.contains('editar')) {
    const editBtns = Array.from(document.getElementsByClassName('editar'))
    const currentIndex = editBtns.indexOf(e.target)
    console.log('当前点击索引：', currentIndex)
  }
})

两种方式都能实现需求，按需选择即可：