获取不包含具有特定类的元素的元素的索引?

时间:2018-12-10 10:23:39

标签: javascript jquery html jquery-selectors

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

<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 < / strong>。

5 个答案:

答案 0 :(得分:2)

您需要使用li选择器选择.listLabel以外的所有:not()

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

答案 1 :(得分: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>

答案 2 :(得分:1)

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

});

答案 3 :(得分:1)

您可以通过使用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 :(得分:1)

检查一下。

application/json
Use multipart/form-data for POST