Найти индекс класса в массиве классов. На чистом JS

Question

Есть такая html структура

<div class="className">1</div>
<div class="className">2</div>
<div class="className className_active">3</div>
<div class="className">4</div>
<div class="className">5</div>
<div class="className">6</div>
<div class="className">7</div>

Необходимо найти индекс класса className_active в массиве classNames;

let active = document.getElementsByClassName('className_active');
let classNames = document.querySelectorAll('.className');
let index = classNames.indexOf(active);

Answer 1

const index = [...document.querySelectorAll('.className')]
  .findIndex(element => element.className.includes('className_active'));

console.log(index);

<div class="className">1</div>
<div class="className">2</div>
<div class="className className_active">3</div>
<div class="className">4</div>
<div class="className">5</div>
<div class="className">6</div>
<div class="className">7</div>

Answer 2

classNames это не массив. Это коллекция. Чтобы его в массив переделать, надо либо деструктурировать, либо Array.from() использовать. getElementsByClassName тоже возвращает не массив, а коллекцию. И так не получится искать индекс коллекции в коллекции. Поэтому вот ниже я сначала нашёл обычным квериСелектором нужный элемент, потому что он (querySelector) возвращает первое вхождение, потом сделал массив из коллекции, а потом уже нашел, где он лежит. То есть код практически не изменился в плане логики работы, просто не правильно использовались некоторые методы :)

let active = document.querySelector('.className_active');
let classNames = [...document.querySelectorAll('.className')];
// let classNames = Array.from(document.querySelectorAll('.className')); То же самое, но выше просто запись красивее, лаконичнее.
let index = classNames.indexOf(active);

console.log(index);

<div class="className">1</div>
<div class="className">2</div>
<div class="className className_active">3</div>
<div class="className">4</div>
<div class="className">5</div>
<div class="className">6</div>
<div class="className">7</div>

Answer 3

Если у объекта нет какого-то метода, можно взять его у другого объекта и вызвать в нужном контексте. indexOf() есть у массивов. Достать оттуда → Array.prototype.indexOf, и вызвать через Function.prototype.call() — где первый аргумент - объект, в контексте которого нужно вызвать функцию, а все последующие - аргументы этой функции.

var classNames = document.querySelectorAll('.className');
var active = document.querySelector('.className.active');

var index = Array.prototype.indexOf.call(classNames, active);
     // как-бы → classNames.indexOf(active);

console.log( index );

.active { color: red; }

<div class="className">0</div>
<div class="className">1</div>
<div class="className active">2</div>
<div class="className">3</div>
<div class="className">4</div>
<div class="className">5</div>
<div class="className">6</div>

P.s. Для данной задачи легче превратить ваш список в обычный массив, как уже отвечали. Но полезно знать и про call.

БЛОГ НА HUSL

Найти индекс класса в массиве классов. На чистом JS

Ответы (3 шт):