获取兄弟姐妹之间的元素索引，忽略具有特定孩子的兄弟姐妹

Question

我有一个特定的用例，我似乎找不到答案。给定以下 DOM 元素：

<div class="wrapper">
   <div class="item"></div>
   <div class="item">
       <div class="foo"></div>
   </div>
   <div class="item">
       <div class="bar"></div>
   </div>
   <div class="item"></div>
   <div class="item selected"></div>
   <div class="item"></div>
</div>

我需要找到该.selected元素相对于它的兄弟元素的索引。但我需要忽略任何具有.foo子元素的兄弟元素（它只会是直接子元素）。

因此，通常要查找 的索引，.item .selected您可以使用$(".item.selected").index()给出4 的索引，但由于它之前的一项有.foo子项，所以正确的答案是3。

我认为，最好的方法是获取所选元素之前的所有兄弟姐妹（因为它之后的兄弟姐妹不会改变其索引），然后计算有多少个有孩子.foo，并从所选索引中减去该数字，所以4-1=3。我尝试这样做：

var selectedIndex = $(".item.selected").index();
var fooCount = $(".item.selected").prevAll('.item > .foo').length;
var finalIndex = selectedIndex - fooCount;

问题是， fooCount 出现了0而不是3。

Answer 1

您可以简单地使用.filter()和删除具有给定子元素的前面元素。

const selected = $('.selected');
const foos = selected.prevAll().filter(function() {
  return !($(this).find('.foo').length);
});

console.log(selected.index(), foos.length);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="item"></div>
  <div class="item">
    <div class="foo"></div>
  </div>
  <div class="item">
    <div class="bar"></div>
  </div>
  <div class="item"></div>
  <div class="item selected"></div>
  <div class="item"></div>
</div>