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

loading...


4

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

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

loading...

5回答

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

  • 2

    核实..

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

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

  • 2

    你可以这样做 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>
    

  • 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);
    
    });
    
评论

暂时没有评论!