Как получить индекс элемента с определенным классом на 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 container = document.querySelector('.js-practices_buttons');
const itemSelector = '.practice_item';
const buttonSelector = `${itemSelector} .js-practice_button`;
const activeClass = 'current';
const activeSelector = `.${activeClass}`;

const index = Array.prototype.findIndex.call(
  container.querySelectorAll(buttonSelector),
  n => n.classList.contains(activeClass)
);

// или

const { children } = container;
let index = children.length;
while (index-- && !children[index].matches(`:has(${activeSelector})`)) ;

// или

const index =
  (el => el ? [...el.parentNode.children].indexOf(el) : -1)
  (container.querySelector(`${itemSelector}:has(${activeSelector})`));

// или

let index = -1;
for (
  let el = container.querySelector(activeSelector)?.closest(itemSelector);
  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();
}
});

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