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

Question

[Богдан Жувак]

Нужно узнать индекс элемента в блоке с классом active:

<div class="house_size">
          <a href="#"></a>
          <a href="#" class="active"></a>
          <a href="#"></a>
          <a href="#"></a>
</div>

Данный код

console.log($('.house_size').children().hasClass('active').index());

выдает ошибку

Uncaught TypeError: $(...).children(...).hasClass(...).index is not a function

Answer 1

[0xD34F]

Замените .hasClass('active') на .filter('.active').

Или делайте так: $('.house_size > .active').index().

Или, к чёрту jquery.

Где элемент находится, какой класс обозначает активность, сам элемент:

const parent = document.querySelector('.house_size');
const activeClass = 'active';
const el = parent.querySelector(`:scope > .${activeClass}`);

Получаем индекс:

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

// или

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

// или

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

// или

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

Comments

[Богдан Жувак]

Спасибо