获取元素的索引,排除具有特定类的元素?

我有一个列表,可能有也可能没有动态添加到其中的不可选列表项 . 它看起来像这样(包括不可选择的列表项):

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

回答(5)

2 years ago

您需要使用 :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>

2 years ago

核实..

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

2 years ago

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

2 years ago

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

这将为您提供类 .js-sppmg__li 的父级索引

Demo

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

2 years ago

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

});