如何获取同class元素集合中被点击元素的位置（非坐标）

数据老陈

2026-8-19

获取元素在同class集合中的位次

要实现点击class为test的元素时，获取它在所有同class元素中的位次，可通过以下两种常见方式实现：

原生JavaScript方案

通过querySelectorAll获取所有目标元素集合，将其转为数组后利用indexOf获取当前元素的索引，索引加1即可得到从1开始的位次：

// 获取所有class为test的元素（按文档流顺序排列）
const testElements = document.querySelectorAll('.test');

// 为每个元素绑定点击事件
testElements.forEach(el => {
  el.addEventListener('click', function() {
    // 将类数组集合转为数组，获取当前元素的索引（从0开始）
    const index = Array.from(testElements).indexOf(this);
    // 转换为从1开始的位次
    const position = index + 1;
    console.log(`当前元素在test类集合中的位次：${position}`);
    // 若需要索引值，直接使用index即可
    // console.log(`当前元素的索引：${index}`);
  });
});

说明

querySelectorAll('.test')会按照元素在DOM文档中出现的先后顺序返回所有匹配元素，不受嵌套层级影响，完全符合你示例中四个元素的顺序（one → two → three → four）。
Array.from(testElements)用于将querySelectorAll返回的类数组对象转为真正的数组，这样才能使用数组的indexOf方法。

jQuery方案

如果项目中使用jQuery，可直接利用index()方法快速获取位次：

$('.test').click(function() {
  // 获取当前元素在所有.test元素中的索引（从0开始）
  const index = $(this).index('.test');
  // 转换为从1开始的位次
  const position = index + 1;
  console.log(`当前元素在test类集合中的位次：${position}`);
});