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 。

我想，最好的方法就是在所选元素之前抓住所有兄弟姐妹（因为兄弟姐妹之后不会改变它的索引），然后计算有多少人拥有{ {1}}子项，并从所选索引中减去该数字，因此 4-1 = 3 。我试着这样做：

.foo

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

Answer 1

您只需使用.filter()并删除具有给定子项的前面元素。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

Use this selector ".item:not(:has(.foo))" and then loop to find the specific index.

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;

否则，当您真正想要一个拥有子且类为{{1}的兄弟姐妹时，您正在寻找带有.foo类的兄弟 }。

<强>段：

.foo

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

Answer 4

你可以结合使用：

:not()：选择与给定选择器不匹配的所有元素。

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

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

因此，您可以更改代码：

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>

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

4 个答案: