如何使用jQuery获取元素在其同类元素中的相对索引？

我明白你的需求了——你现在用jQuery的index()直接调用得到的是全局子元素的索引4，但你需要的是这个带active类的.horse在所有.horse元素里的位置3，对吧？

这里有两种简单的解决方法：

方法一：使用jQuery限定集合范围 #

先选中所有.horse元素组成一个集合，再用index()方法传入目标元素，就能得到它在这个集合里的索引：

// 先获取.wrapper下所有的.horse元素
const $horseCollection = $('.wrapper .horse');
// 定位到带active类的那个horse
const $activeHorse = $('.wrapper .horse.active');
// 计算它在horse集合中的索引
const activeHorseIndex = $horseCollection.index($activeHorse);

console.log(activeHorseIndex); // 输出3，就是你想要的结果

原理说明 #

jQuery的index()方法有两种用法：

• 不传参数时：返回元素在父元素所有直接子元素中的位置（这就是你之前得到4的原因，父元素里的第5个子元素，从0计数就是4）
• 传入一个元素时：返回该元素在当前jQuery集合中的位置，这样就自动排除了.lion、.elephant这些非horse元素，只统计同类型的.horse

方法二：原生JavaScript实现 #

如果你不想用jQuery，原生JS也能轻松搞定，思路是一样的：先拿到所有.horse的集合，转成数组后用indexOf找目标元素的位置：

// 获取所有.wrapper下的.horse元素
const horseElements = document.querySelectorAll('.wrapper .horse');
// 找到带active类的horse
const activeHorseElement = document.querySelector('.wrapper .horse.active');
// 把NodeList转成数组，再用indexOf找索引
const activeHorseIndex = Array.from(horseElements).indexOf(activeHorseElement);

console.log(activeHorseIndex); // 同样输出3

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