获取同一class元素的索引——基于给定HTML结构的技术请求

云上老周

2026-5-20

获取带有active类的元素的索引

没问题！要获取这些带有active类的元素在各自父<ul>列表中的索引，这里有两种常用的实现方式，原生JavaScript和jQuery都能搞定：

原生JavaScript实现

这种方式不需要依赖任何库，直接用浏览器原生API就能实现：

// 选中所有带有active类的元素
const activeElements = document.querySelectorAll('.active');

// 遍历每个active元素，计算它在父列表中的索引
activeElements.forEach(element => {
  // 将父元素的子节点转换为数组（方便使用indexOf方法）
  const siblingItems = Array.from(element.parentElement.children);
  // 获取当前元素在兄弟节点中的索引
  const itemIndex = siblingItems.indexOf(element);
  // 输出结果，你可以根据需求替换成自己的逻辑
  console.log(`Active元素 "${element.textContent.trim()}" 的索引是: ${itemIndex}`);
});

代码说明：

document.querySelectorAll('.active')：获取页面上所有带有active类的元素；
element.parentElement.children：拿到当前元素所在的<ul>下的所有子<li>元素；
Array.from()：把DOM集合转换成数组，这样就能使用数组的indexOf()方法找到当前元素的位置；
最终得到的索引是相对于当前元素所在的<ul>列表的，比如第一个<ul>里的item1索引是1，第二个<ul>里的item0索引是0，完全符合你的HTML结构。

jQuery实现

如果你项目里已经引入了jQuery，那代码会更简洁：

// 遍历所有带有active类的元素
$('.active').each(function() {
  // jQuery的index()方法默认返回当前元素在同辈节点中的位置
  const itemIndex = $(this).index();
  // 输出结果
  console.log(`Active元素 "${$(this).text().trim()}" 的索引是: ${itemIndex}`);
});