Из jQuery в чистый JavaScript

Question

В jQuery есть достаточно простая возможность по клику на объект получить его порядковый index из N-числа аналогичных объектов:

$('.paragraph').click(function() {
  const Num = $(this).index();
  console.log(Num);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="paragraph">1</p>
<p class="paragraph">2</p>
<p class="paragraph">3</p>
<p class="paragraph">4</p>

Подскажите пожалуйста, как на чистом JS реализовать этот же функционал и на сколько массивней получится код. Спасибо!

Answer 1

document.querySelectorAll('.paragraph').forEach((el, index) => {
    el.addEventListener('click', () => {
        console.log(index + 1);
    });
});

<p class="paragraph">1</p>
<p class="paragraph">2</p>
<p class="paragraph">3</p>
<p class="paragraph">4</p>

На самом деле индекс должен начинаться с нуля. Но ради "совместимости" тут сделано с 1

Answer 2

В данном случае .index возвращает индекс элемента в родителе.

Таким образом нужно получить родителя элемента, например с помощью метода .parentNode

И пройтись по всем дочерним элементам, пока не дойдем до искомого.

Получить соседний элемент можно с помощью метода .nextElementSibling

function index(el) {
  if (!el.parentNode) return -1;

  var parent = el.parentNode;

  for (var cur = parent.firstElementChild, index = 0; cur && (cur != el); cur = cur.nextElementSibling, index++);

  return index;
}
$('.paragraph').click(function() {
  const Num = index(this);
  console.log(Num);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <p class="paragraph">1</p>
  <p class="paragraph">2</p>
  <p class="paragraph">3</p>
  <p class="paragraph">4</p>
</div>

Answer 3

Ниже приведена наиболее точная интерпретация вашего кода на JQuery. Во первых .index() возвращает индекс элемента в родителе (и он теоретичеки может и изменится при удалении/добавлении элементов, поэтому определять его нужно именно внутри обработчика). Во вторых this внутри обработчика события ссылается на элемент к которому это событие непосредственно привязано. В третих, для поиска индекса элемента проще использовать встроенный в Array метод .indexOf().

window.document.querySelectorAll('.paragraph').forEach((el) => {
  el.addEventListener('click', (event) => {

    var index = window.Array.prototype.indexOf.call(el.parentNode.children, el) + 1;
    console.log(index);

  });
});

<div>
  <p class="paragraph">1</p>
  <p class="paragraph">2</p>
  <p class="paragraph">3</p>
  <p class="paragraph">4</p>
</div>

БЛОГ НА HUSL

Из jQuery в чистый JavaScript

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