jQuery中如何获取点击的td元素在所属tr中的子元素序号

实现逻辑 #

当绑定了.colclass类的td被点击时，要拿到的是该单元格在所属tr行内、按照td元素顺序从1开始计数的排位序号，对应示例场景下第三列的目标td点击后返回值为3，核心实现分两步：

1. 通过当前点击的td向上定位到所属的父tr元素
2. 取该tr下所有td组成的集合，计算当前点击的td在集合中的索引，因为jQuery的索引默认从0起始，因此需要+1得到符合日常计数习惯的排位值

完整可运行代码 #

$(".colclass").click(function (e) {
  const targetTd = $(this);
  // 向上匹配最近的tr父元素
  const parentRow = targetTd.closest("tr");
  // 获取当前tr下所有td元素的集合
  const rowAllTds = parentRow.find("td");
  // 计算从1开始的列排位序号
  const columnRank = rowAllTds.index(targetTd) + 1;
  // 示例场景下点击第三列的.colclass时，columnRank值为3
  console.log("当前列排位序号：", columnRank);
});

常见实现误区 #

• 直接写targetTd.index()：该方法默认计算当前元素在全页面匹配相同选择器的元素集合中的位置，不是当前tr内部的相对位置，跨多行的表格场景下会出现序号完全错乱
• 用targetTd.siblings().index(targetTd)：如果tr行内除了td还有其他嵌套元素（比如嵌入的span、图标节点），会把非td元素计入索引统计，导致序号偏移

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