获取同级兄弟中元素的索引，而忽略具有特定子级的同级兄弟

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同级的.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> 

Answer 2

使用此选择器".item:not(:has(.foo))" ，然后循环查找特定索引。

 var index = $(".item:not(:has(.foo))") .toArray() .findIndex(function(item) { return $(item).hasClass('selected'); }); console.log(index); 

 <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> 

Answer 3

你近了

更改：

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

… 至：

var fooCount = $(".item.selected").prevAll('.item:has(.foo)').length;

否则，你正在寻找带班兄弟姐妹 .foo ，当你真正想要的是具有类儿童的兄弟姐妹.foo 。

片段：

 var selectedIndex = $(".item.selected").index(); var fooCount = $(".item.selected").prevAll('.item:has(.foo)').length; var finalIndex = selectedIndex - fooCount; console.log(finalIndex); 

 <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> 

Answer 4

您可以结合使用：

：not（） ：选择与给定选择器不匹配的所有元素。

：has（） ：将匹配元素的集合减少为具有与选择器或DOM元素匹配的后代的元素。

：index（element） ：其中element是DOM元素或要查找的jQuery对象中的第一个元素。

因此，您可以更改代码：

var selectedIndex = $(".item.selected").index();

至：

var selectedIndex = $('.item:not(:has(.foo))').index($('.item.selected'));

 var selectedIndex = $('.item:not(:has(.foo))').index($('.item.selected')); console.log(selectedIndex ); 

 <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>