Пытаюсь так:
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++
) ;
