求助：基于指定类获取被点击Span元素的同类别索引

问题原因分析 #

你现在遇到的问题核心在于：不带参数的index()方法是计算当前元素在所有同级兄弟节点中的位置，而不是仅在拥有.d1 available类的元素集合里的索引。看你的HTML结构，中间有一个空的<span></span>，它会占用一个索引位，所以点击seatname为A5的元素时，它在所有兄弟里的索引是5，但你需要的是在目标类元素里的4，自然就不符合预期了。

两种可行的解决方案 #

方案一：给index()传入目标选择器

直接把目标元素的选择器作为参数传给index()，这样它就会只在匹配该选择器的元素集合里计算索引：

var selector = $(this);
var selectIndex = selector.index('.d1.available');

这样点击A5时，就会正确返回4，因为它会自动忽略那个空的span，只统计符合类条件的元素。

方案二：先获取目标元素集合，再找当前元素的索引

先把所有.d1.available元素缓存成一个集合，然后用这个集合的index()方法传入当前元素，得到它在集合里的位置：

// 先缓存所有目标座位元素，避免重复查询DOM
var allAvailableSeats = $('.d1.available');

// 绑定点击事件
$('.d1.available').on('click', function() {
    var selectIndex = allAvailableSeats.index(this);
    console.log(selectIndex); // 点击A5时输出4
});

这种方式适合需要多次操作目标元素集合的场景，性能会更优，因为不用每次点击都重新查询DOM。

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