jQuery如何获取被点击元素在同类型元素中的序号？

嘿，这个需求其实挺常见的，用jQuery几步就能搞定！咱们直接结合你给的示例代码来说明：

核心思路 #

要知道点击的是第几个.add-resource-link按钮，关键是先拿到所有同类型按钮的集合，再找到当前点击元素在这个集合里的位置。注意jQuery的.index()方法返回的是从0开始的索引，如果需要从1开始的序号，只要加1就行。

静态元素场景（按钮一开始就存在于页面） #

如果你的按钮是页面加载时就有的静态元素，直接绑定点击事件就行：

$('.add-resource-link').click(function() {
  // 获取所有同类型按钮的jQuery集合
  const allLinks = $('.add-resource-link');
  // 获取当前点击按钮在集合中的索引（从0开始）
  const zeroBasedIndex = allLinks.index(this);
  // 转换成从1开始的序号
  const oneBasedIndex = zeroBasedIndex + 1;
  
  // 这里可以根据序号做你需要的操作，比如打印出来
  console.log(`你点击的是第${oneBasedIndex}个.add-resource-link按钮`);
});

动态元素场景（按钮是后续通过JS添加的） #

如果你的按钮是动态生成的（比如点击其他按钮新增的），那最好用事件委托，把事件绑定到父元素上（比如你的.table-edit-components表格），这样新添加的按钮也能触发事件：

$('.table-edit-components').on('click', '.add-resource-link', function() {
  const allLinks = $('.add-resource-link');
  const oneBasedIndex = allLinks.index(this) + 1;
  
  console.log(`你点击的是第${oneBasedIndex}个.add-resource-link按钮`);
});

补充说明 #

• jQuery的.index(element)方法非常好用：当你调用jQuery集合.index(目标元素)时，它会返回目标元素在这个集合中的位置索引（从0开始）。
• 如果你的同类型元素有更精准的范围（比如只统计当前行内的按钮），可以调整集合的选择器，比如$(this).closest('tr').find('.add-resource-link')，这样就能只获取当前<tr>里的同类型按钮，再计算序号。

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