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

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

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

最佳答案
您需要使用: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>

转载注明原文:javascript – 获取元素的索引,排除具有特定类的元素? - 代码日志