如何获取'this'选择器索引？点击指定Div需返回对应索引值

这需求很容易实现，核心思路是先把需要监听的元素统一放进一个集合，然后在点击事件里用this定位当前元素在集合中的位置，给你两种常用的实现方案：

原生 JavaScript 实现 #

先获取目标元素的集合，给每个元素绑定点击事件，在回调里通过this结合数组的indexOf方法拿到索引：

// 第一步：获取所有需要监听点击的元素
const targetElements = document.querySelectorAll('#id1, #id2');

// 第二步：遍历元素，绑定点击事件
targetElements.forEach(el => {
  el.addEventListener('click', function() {
    // 把NodeList转为数组，用indexOf找到当前元素（this）的索引
    const clickIndex = Array.from(targetElements).indexOf(this);
    console.log(clickIndex); // 点击id1输出0，点击id2输出1
  });
});

原理说明 #

• 事件回调里的this就是当前被点击的DOM元素，精准指向触发事件的那个div；
• querySelectorAll返回的是NodeList，转成数组后就能用indexOf方法查找元素在集合中的位置，正好对应你要的索引值。

jQuery 实现（如果项目中使用jQuery） #

用jQuery的话写法更简洁，同样利用this结合index()方法：

// 选中目标元素并绑定点击事件
$('#id1, #id2').on('click', function() {
  // 传入this，获取它在目标集合中的索引
  const clickIndex = $('#id1, #id2').index(this);
  console.log(clickIndex);
});

或者更简洁的写法：

$('#id1, #id2').click(function() {
  console.log($(this).index('#id1, #id2'));
});

原理说明 #

• jQuery事件回调里的this同样指向触发点击的原生DOM元素；
• index(this)方法会返回当前元素在指定jQuery集合中的位置索引，完美匹配你的需求。

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