Как получить номер активного элемента?

Question

[etherealwm]

Есть такой код:

<div class="xlist">
  <div class="xitem">1</div>
  <div class="xitem">2</div>
  <div class="xitem active">3</div>
  <div class="xitem">4</div>
  <div class="xitem">5</div>
</div>

Как мне в переменную получить номер элемента в списке с классом active (в данном примере 3)?

Answer 1

[0xD34F]

Кто у элемента родитель, какой класс обозначает активность:

const parent = document.querySelector('.xlist');
const activeClass = 'active';
const activeSelector = `.${activeClass}`;

Используем метод массива или вручную перебираем содержимое родителя:

const index = Array.prototype.findIndex.call(
  parent.children,
  n => n.classList.contains(activeClass)
);

// или

let index = parent.children.length;
while (index-- && !parent.children[index].matches(activeSelector)) ;

Если вдруг доступен сам активный элемент,...

const el = parent.querySelector(`:scope > ${activeSelector}`);

...тогда определение его индекса может принять следующий вид:

let index = -1;
for (let n = el; n; n = n.previousElementSibling, index++) ;

// или

const index = [...parent.children].indexOf(el);

Comments

[etherealwm]

От души