0

Есть такая 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);

3 ответа 3

4

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>

3

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>

2
  • маленький вопросик, если в данном массиве я захочу удалить класс active, то как это лучше сделать?
    – Imp3l
    20 мар 2020 в 9:53
  • @Imp3l тогда заводишь отдельную переменную с массивом елементов, получаешь индекс елемента и по индексу удаляешь класс
    – WVFFLIFE
    20 мар 2020 в 10:15
2

Если у объекта нет какого-то метода, можно взять его у другого объекта и вызвать в нужном контексте. 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.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.