javascript – 获取兄弟姐妹中的元素索引,忽略与特定孩子的兄弟姐妹

2023年1月24日 245次阅读

我有一个特定的用例,我似乎无法找到答案.鉴于以下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.

最佳答案 您只需使用
.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>
点赞