Получить индекс элемента, исключая элемент с определенным классом?

Question

У меня есть список, который может иметь или не иметь невыбираемый элемент списка, добавляемый в него динамически.Это выглядит так (с включенным неотбираемым элементом списка):

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

Answer 1

Проверьте это ..

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

Answer 2

Вы можете достичь того, что вам нужно, используя 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>

Answer 3

Вы можете сделать это следующим образом 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>

Answer 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);

});

Answer 5

Вам нужно выбрать все 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>