获取元素在兄弟节点中的索引（忽略含特定子元素的节点）

这个场景我之前处理过，直接用$(".item.selected").index()确实会把包含直接.foo子元素的兄弟节点算进去，导致索引不对。咱们可以换个思路，先把不符合要求的兄弟节点过滤掉，再在干净的节点集合里找目标元素的索引。

方法一：使用filter()手动筛选 #

// 第一步：筛选出所有不包含直接.foo子元素的.item节点
const validItems = $(".item").filter(function() {
  // 检查当前节点是否没有直接的.foo子元素
  return !$(this).children(".foo").length;
});

// 第二步：在筛选后的集合中获取.selected元素的索引
const correctIndex = validItems.index($(".item.selected"));
console.log(correctIndex); // 输出3，符合预期

方法二：用CSS选择器简化写法 #

如果喜欢更简洁的链式调用，可以结合:not()和:has()选择器直接筛选：

const correctIndex = $(".item")
  .filter(":not(:has(>.foo))") // 排除包含直接.foo子元素的.item
  .index($(".item.selected"));

这里的>.foo是关键，表示只匹配直接子元素是.foo的节点，不会误判嵌套更深的情况，刚好符合你的需求。

验证场景说明 #

假设你的DOM结构大概是这样：

<div class="parent">
  <div class="item">节点1</div>
  <div class="item">节点2</div>
  <div class="item">节点3</div>
  <div class="item">
    <div class="foo">直接子元素foo</div>
  </div>
  <div class="item selected">节点5</div>
</div>

普通index()会把第四个带.foo的节点算进去，得到索引4；而经过过滤后，有效节点是前三个和第五个，所以.selected的索引就是3，完全符合你的要求。

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