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