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

Question

[maksmaksimovich]

Есть div, в нём множество элементов p. У одного элемента p есть класс 'there'. Как узнать каким по счёту идёт этот элемент p с данным классом?

Answer 1

[0xD34F]

Определимся с элементом, у которого будем узнавать индекс - внутри кого он находится, что это за элемент, какой у него должен быть класс:

const parentSelector = 'div';
const childSelector = 'p';
const className = 'there';

const siblingsSelector = `${parentSelector} > ${childSelector}`;
const elementSelector = `${siblingsSelector}.${className}`;

Дальше есть варианты:

const index = Array.prototype.findIndex.call(
  document.querySelectorAll(siblingsSelector),
  n => n.classList.contains(className)
);

или

let index = -1;
for (
  let el = document.querySelector(elementSelector);
  el;
  index++, el = el.previousElementSibling
) ;

или

const el = document.querySelector(elementSelector);
const index = el ? [...el.parentNode.children].indexOf(el) : -1;

Если вдруг у элемента могут быть другие соседи, не соответствующие childSelector, и они не должны учитываться, то третий вариант не подходит, а во втором надо заменить index++ на index += el.matches(childSelector).

Answer 2

[Exploding]

И вдогонку может пригодиться:
var index = $("div p.there").index();