获取排除具有特定 class 的元素的元素的索引？

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() 和 class 选择器等，但它 returns 与往常一样的值（3 而不是 2) 或 -1.

Answer 1

您需要 select 所有 li 除了 .listLabel 使用 :not() select 或

$(".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>

Answer 2

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

这将为您提供具有 class .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>

Answer 3

我认为您应该在 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);

});

Answer 4

您可以通过使用 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>

Answer 5

检查它..

$('.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>

获取排除具有特定 class 的元素的元素的索引？

Get the index of an element excluding an element with a specific class?

html

javascript

jquery

jquery-selectors