Get the index of an element excluding an element with a specific class?

Question

I have a list which may or may not have a non-selectable list-item added to it dynamically. It looks like this (with the non-selectable list-item included):

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

When I click on the third list item which is data-filter-id="Two" , I want the index:

parentIndex = $(this).parent().index();

to exclude the first, non-inclusive element which is listLabel . Is it possible to not include it in the index count? I've tried using .not() and class selectors etc but it returns either the same value as always ( 3 instead of 2 ) or -1 .

Answer 1

You need to select all li except .listLabel using :not() selector

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

Answer 2

You can do it like this parentIndex = $(".js-sppmg__li").index($(this).parent());

This will give you the index of a parent with the class .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> 

Answer 3

I think you should apply a click event on li.js-sppmg__li > span instead .list li

$('li.js-sppmg__li > span').on('click', function(){
    var parentIndex = $(this).parent().index(); 
     parentIndex = parentIndex-1;
     console.log(parentIndex);

});

Answer 4

You can achieve what you require by using index() and providing it with a selector to find the group of elements to retrieve the index within. Try this:

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

Answer 5

Check it..

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