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

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 className = 'active';
const el = parent.querySelector(`:scope > .${className}`);

Какие есть варианты получения индекса:

const index = el ? [...parent.children].indexOf(el) : -1;

или

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

или

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

или

const { children } = parent;
let index = children.length;
while (index-- && !children[index].matches(`.${className}`));

Comments

[etherealwm]

От души