获取一个元素的索引，但排除具有特定类的元素？

Question

我有一个列表，其中可能会动态添加一个不可选择的列表项。它看起来像这样（包括不可选择的列表项）：

<ul class="list js-list ">
  <li class="listLabel">
    <span>Make Selection:</span>
  </li>
  <li class="js-sppmg__li">
    <span class="listItem js-listItem" data-filter-id="All">All</span>
  </li>
  <li class="js-sppmg__li">
    <span class="listItem js-listItem" data-filter-id="One">One</span>
  </li>
  <li class="js-sppmg__li">
    <span class="listItem js-listItem" data-filter-id="Two">Two</span>
  </li>
  <li class="js-sppmg__li">
    <span class="listItem js-listItem" data-filter-id="Three">Three</span>
  </li>
</ul>

当我点击第三个列表项，即data-filter-id="Two"时，我想要该项的索引：

parentIndex = $(this).parent().index();

要排除第一个不包括在内的元素listLabel，是否有可能不将其计入索引计数中？我尝试使用.not()和类选择器等，但返回的结果始终相同（为3而非2）或-1。

- Rebecca O'Riordan

---

.closest('.listItem') instead of .parent() - Mohamed-Yousef

Answer 1

你需要使用:not()选择器来选择除了.listLabel以外的所有li。

$(".listItem").click(function(){
  var index = $(this).closest("ul").find("li:not(.listLabel)").index($(this).parent());
  console.log(index);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="list js-list ">
  <li class="listLabel">
    <span>Make Selection:</span>
  </li>
  <li class="js-sppmg__li">
    <span class="listItem js-listItem" data-filter-id="All">All</span>
  </li>
  <li class="js-sppmg__li">
    <span class="listItem js-listItem" data-filter-id="One">One</span>
  </li>
  <li class="js-sppmg__li">
    <span class="listItem js-listItem" data-filter-id="Two">Two</span>
  </li>
  <li class="js-sppmg__li">
    <span class="listItem js-listItem" data-filter-id="Three">Three</span>
  </li>
</ul>

- Mohammad

---

这个有效 - 谢谢！我忘记在最后的.index()中添加.parent()了。 - Rebecca O'Riordan

Answer 2

您可以这样做：parentIndex = $(".js-sppmg__li").index($(this).parent());

这将为您提供具有类.js-sppmg__li的父项的索引。

演示

$(".js-listItem").click(function(){
  parentIndex = $(".js-sppmg__li").index($(this).parent());
  console.log(parentIndex);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="list js-list ">
  <li class="listLabel">
    <span>Make Selection:</span>
  </li>
  <li class="js-sppmg__li">
    <span class="listItem js-listItem" data-filter-id="All">All</span>
  </li>
  <li class="js-sppmg__li">
    <span class="listItem js-listItem" data-filter-id="One">One</span>
  </li>
  <li class="js-sppmg__li">
    <span class="listItem js-listItem" data-filter-id="Two">Two</span>
  </li>
  <li class="js-sppmg__li">
    <span class="listItem js-listItem" data-filter-id="Three">Three</span>
  </li>
</ul>

- Carsten Løvbo Andersen

Answer 3

您可以使用index()并提供选择器来查找要检索索引的元素组，从而实现所需功能。试试这个：

$('.js-listItem').click(function() {
  var index = $(this).index('.js-list .js-listItem');
  console.log(index);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="list js-list ">
  <li class="listLabel">
    <span>Make Selection:</span>
  </li>
  <li class="js-sppmg__li">
    <span class="listItem js-listItem" data-filter-id="All">All</span>
  </li>
  <li class="js-sppmg__li">
    <span class="listItem js-listItem" data-filter-id="One">One</span>
  </li>
  <li class="js-sppmg__li">
    <span class="listItem js-listItem" data-filter-id="Two">Two</span>
  </li>
  <li class="js-sppmg__li">
    <span class="listItem js-listItem" data-filter-id="Three">Three</span>
  </li>
</ul>

- Rory McCrossan

Answer 4

检查一下...

$('.js-list .js-sppmg__li').on('click',function(){
var nthelement=$(this).index()
if(nthelement==3)
alert(nthelement);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="list js-list ">
 <li class="listLabel">
  <span>Make Selection:</span>
 </li>
 <li class="js-sppmg__li">
   <span class="listItem js-listItem" data-filter-id="All">All</span>
 </li>
 <li class="js-sppmg__li">
   <span class="listItem js-listItem" data-filter-id="One">One</span>
 </li>
 <li class="js-sppmg__li">
   <span class="listItem js-listItem" data-filter-id="Two">Two</span>
 </li>
 <li class="js-sppmg__li">
   <span class="listItem js-listItem" data-filter-id="Three">Three</span>
 </li>

- Fraz Abbas

Answer 5

我认为你应该在 li.js-sppmg__li > span 上应用点击事件，而不是在 .list li 上。

$('li.js-sppmg__li > span').on('click', function(){
    var parentIndex = $(this).parent().index(); 
     parentIndex = parentIndex-1;
     console.log(parentIndex);

});

- Gufran Hasan