Как получить индекс элемента с определенным классом на jQuery?

Question

[ymfront]

Есть несколько кнопок с классами.js-practice_button:

<ul class="practices_list js-practices_buttons">
    <li class="practice_item"><span class="practice_button js-practice_button" data-target="js-practice1">Недвижимость</span></li>
    <li class="practice_item"><span class="practice_button js-practice_button" data-target="js-practice2">Иммиграция</span></li>
    <li class="practice_item"><span class="practice_button current js-practice_button" data-target="js-practice3">Банковское дело</span></li>
    <li class="practice_item"><span class="practice_button js-practice_button" data-target="js-practice4">Судебный процесс</span></li>
</ul>

Нужно получить индекс кнопки с классом current. Как это правильно сделать?

Пытаюсь так:

let currentIndex = $(".js-practice_button.current").index();

Но значение всегда 0, у какой бы кнопки класс current не присутствовал.

UPD:

Получилось получить так:

let currentIndex = $(".js-practice_button").index($(".current"));

Answer 1

[0xD34F]

Пытаюсь так:

let currentIndex = $(".js-practice_button.current").index();

Но значение всегда 0, у какой бы кнопки класс current не присутствовал.

Потому что метод index по умолчанию определяет индекс элемента среди соседей, а так как у каждой кнопки есть отдельный родитель... Ну да, получаете то, что получаете.

Можно вместо индекса кнопки определять индекс родителя:

const index = $('.js-practice_button.current').closest('li').index();

Или, если указать методу index в качестве параметра селектор, то индекс будет определятся не среди соседей, а среди элементов, соответствующих селектору:

const index = $('.js-practice_button.current').index('.js-practice_button');

А вообще, к чёрту jquery. Есть варианты и на чистом js:

const index = Array.prototype.findIndex.call(
  document.querySelectorAll('.js-practice_button'),
  n => n.classList.contains('current')
);

// или

const el = document.querySelector('.js-practice_button.current')?.parentNode;
const index = el ? [...el.parentNode.children].indexOf(el) : -1;

// или

let index = -1;
for (
  let el = document.querySelector('.js-practice_button.current')?.closest('li');
  el;
  el = el.previousElementSibling, index++
) ;

Answer 2

[My1Name]

Нужно перебрать все элементы <li>

Получилось получить так:

let currentIndex = $(".js-practice_button").index($(".current"));

Можно попробовать ещё вот так:

var index = $('.practices_list').find('.practice_item').map(function() {
if($(this).hasClass('current')){
        return this;
}
    }).get().index;

Или как-то так:

var index = $('.practices_list').find('.practice_item').each(function() {
    if ($(this).hasClass('current')){
return $(this).index();
}
});

В обоих случаях нужно проверить. Я писал ответ с телефона и работоспособность кода не проверял...