1

В 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 реализовать этот же функционал и на сколько массивней получится код. Спасибо!

3 ответа 3

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

2
  • Спасибо, отработало, но все же я убрал увеличение значения на "1" перед выводом, так как при каждой последующей итерации, значение продолжает увеличиваться на "1", а мне необходимо сохранение индекса объекта вне зависимости от кол-ва нажатий на него. 9 авг 2021 в 11:13
  • @Максим да, заменил на index + 1 9 авг 2021 в 11:23
0

В данном случае .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>

0

Ниже приведена наиболее точная интерпретация вашего кода на 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>

2
  • Писать window не обязательно. Потому что это ключ самого window, то есть вы лишнее действие window.window делаете.
    – user347472
    9 авг 2021 в 16:57
  • @Pavel Grishaev я знаю, что это не обязательно в глобальном контексте. Это интерпетация, и здесь показано, что во что вложено.
    – NoSkill
    9 авг 2021 в 17:38

Ваш ответ

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

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