Как получить индекс элемента с двумя классами?

Question

[Михаил]

Добрый день. Есть несколько элементов одного класса, Класс1 . Одному из этих элементов назначается еще один класс, Класс2. Потом у этого элемента этот второй класс удаляется и присваивается другому элементу и т.д. из этих же. И так всё время Класс2 присваивается то одному, то другому элементу с классом1.
Теперь я ищу элемент с классом Класс2, и мне надо узнать его индекс в массиве элементов с Классом1.
Если я пишу вот так
$('.class2').index();

то получаю всё время 0, т.к. он один, а мне надо получить его положение в классе1.
Как это можно сделать ?

может как-то так :
$('.class1').parent().find($('.class1, .class2').index();

или так :
$('.class1').parent().find($('.class1').hasClass('.class2').index();

вот пример

https://codepen.io/mk3mk/pen/XOVeqg

Comments

[0xD34F]

получаю всё время 0, т.к. он один

Нет, причина другая.

Не желаете ли оформить пример в песочнице?

[Михаил]

0xD34F, ну вот как-то так :
https://codepen.io/mk3mk/pen/XOVeqg

[0xD34F]

Михаил, нет, не так. Ну вы попробуйте в этом примере выполнить $('.class2').index() - увидите, что там не всегда 0, а сколько надо. То есть, с разметкой вы обманываете.

Answer 1

[0xD34F]

const elems = [...document.querySelectorAll('.class1')];
const index = elems.findIndex(n => n.classList.contains('class2'));

или

const elems = document.querySelectorAll('.class1');
let index = elems.length;
while (--index >= 0 && !elems[index].matches('.class2')) ;

или

const index = Array.prototype.indexOf.call(
  document.querySelectorAll('.class1'),
  document.querySelector('.class2')
);

Comments

[Михаил]

0xD34F , да, действительно , получается , что
$('.class2').index()
работает нормально, и Ваш вариант
const index = [...document.querySelectorAll('.class1')].findIndex(n => n.classList.contains('class2'));

тоже работает.

Интересно, а как тогда получить индекс элемента с классом class2, именно не в контексте его принадлежности к классу class1, а именно в контексте класса class2, т.е. он же всегда должен быть равен нулю, т.к. элемент с классом class2 у нас всегда только один в каждый момент времени..

я вот в этом примере попытался как-то сделать, но все-равно он выдаёт цифры как в первых двух вариантах

https://codepen.io/mk3mk/pen/XOVeqg?editors=1011

[0xD34F]

Михаил,

выдаёт цифры как в первых двух вариантах

Не выдаёт.

Использован querySelector вместо querySelectorAll, из-за чего возникает ошибка при попытке создать массив. А числа те же, потому что вы закопипастили код, и накосячили с классами - в HTML вместо ptext3 у вас ptext2 (то есть, второй результат также выводится под видом третьего), а в JS вы пытаетесь выводить результат в ptext1 (но этот код уже не выполняется из-за упомянутой выше ошибки, так бы вы третий результат вывели в качестве первого).

[Михаил]

0xD34F, спасибо ! всё верно

Answer 2

[KnightForce]

let list = $('.class1');
for(let i = 0; i < list.length; i++) {
 if(list.eq(i).hasClass('class2')) {
    console.log(i);
    break;
 }
}

let list = $('.class1');
for(let i = 0; i < list.length; i++) {
 if(list[i].className.includes('class2')) {
    console.log(i);
    break;
 }
}

$('.class1').each((index, item) => {
 if(item.className.includes('class2')) console.log(index)
} );