如何获取被点击的<div>元素的rowIndex？附HTML结构示例

嘿，既然你已经能定位到被点击的目标<div>元素了，那获取它在父容器里的rowIndex（也就是位置索引）其实很简单，给你分享几种实用的实现方式：

方法一：利用数组转换 + indexOf（最简洁） #

这种方法适合现代浏览器，代码量少易读：

// 假设你已经拿到了被点击的div元素，命名为clickedDiv
const parentContainer = document.getElementById('parent');
// 将父元素的children（HTMLCollection）转为数组，再找索引
const rowIndex = Array.from(parentContainer.children).indexOf(clickedDiv);

// 如果需要从1开始计数（比如第1行、第2行），就加1
// const rowIndexFrom1 = rowIndex + 1;

原理：父元素的children属性返回的是HTMLCollection（类数组对象），不能直接调用数组的indexOf方法，所以用Array.from()把它转换成真正的数组，之后就能用indexOf找到目标元素的位置了。

方法二：遍历兄弟元素计数（兼容老浏览器） #

如果需要兼容IE这类老浏览器，这种循环计数的方式更稳妥：

function getElementRowIndex(targetElement) {
  let index = 0;
  // 不断往前找前一个兄弟元素，每找到一个索引+1
  while (targetElement = targetElement.previousElementSibling) {
    index++;
  }
  return index;
}

// 使用示例
const rowIndex = getElementRowIndex(clickedDiv);
// 同样，要从1开始的话就 return index + 1;

原理：通过previousElementSibling获取当前元素的前一个同级元素，循环直到没有前置兄弟，累计的次数就是当前元素的索引。

方法三：结合事件委托直接获取（更高效） #

如果是在父元素的点击事件里处理，还可以直接通过事件对象定位目标元素并获取索引，这样不用提前保存元素引用：

document.getElementById('parent').addEventListener('click', function(e) {
  // 找到被点击的目标div（即使点击的是里面的span也能匹配到）
  const clickedDiv = e.target.closest('div[id]');
  if (clickedDiv) {
    // 这里的this就是父容器parent
    const rowIndex = Array.from(this.children).indexOf(clickedDiv);
    console.log('当前行索引：', rowIndex);
  }
});

原理：用Element.closest()向上查找最近的符合选择器的元素，确保即使点击的是div内部的span，也能拿到对应的父级div；再结合父元素的children数组转换获取索引。

注意：以上方法返回的索引都是从0开始的，如果你的业务需要从1开始计数，只需要在结果上+1即可。

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