获取不包括具有特定类的元素的元素的索引？

Posted 2023-05-09

【中文标题】获取不包括具有特定类的元素的元素的索引？

【英文标题】：Get the index of an element excluding an element with a specific class?

【发布时间】：2019-05-11 05:38:50

【问题描述】：

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

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

【问题讨论】：

.closest('.listItem') 而不是 .parent()

【参考方案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>

【讨论】：

这行得通 - 谢谢！我忘记将 .parent() 添加到最终的 .index() 中。

【参考方案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>

【参考方案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>

【参考方案4】：

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

);

【参考方案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>