给定DOM元素如何获取其在指定选择器匹配元素列表中的索引n

你可以根据实际需求选择对应写法，核心是利用数组的indexOf方法查询位置：

• 如果要找myEl元素本身在.myClass集合中的索引：
  要求myEl自身带有myClass类名，直接将querySelectorAll返回的NodeList转成数组后查找即可：

  const myClassList = document.querySelectorAll('.myClass');
  const n = Array.from(myClassList).indexOf(myEl);
  

  如果返回-1，说明myEl本身不属于.myClass匹配的元素集合，对应你写的.myClass .myOtherClass选择器场景——myEl是.myClass的内部后代元素，自身不带myClass类名。
• 如果要找myEl所属的父级.myClass元素在所有.myClass中的索引：
  这也是你当前选择器写法对应的最常见需求，先通过closest方法找到myEl最近的、匹配.myClass的祖先元素，再计算索引即可：

  const myClassList = document.querySelectorAll('.myClass');
  // closest会先检查元素自身是否匹配选择器，再向上查找祖先，可兼容两种场景
  const targetMyClass = myEl.closest('.myClass');
  const n = Array.from(myClassList).indexOf(targetMyClass);
  

注意：querySelectorAll返回的是静态NodeList，如果你获取myClassList之后页面上的.myClass元素有增删改动，计算出的索引值会和最新DOM结构不符，需要重新获取集合再计算。

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