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

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>