Как получить индекс li при клике на ссылку?

Question

[Константин Масленников]

Всем привет!

Нужно получить индекс li при клике на ссылку внутри него.
Без использования jquery.

Такая структура:

<ul>
  <li>
    <a href="#">Link 1</a>
  </li>
  <li>
    <a href="#">Link 2</a>
  </li>
  <li>
    <a href="#">Link 3</a>
  </li>
  <li>
    <a href="#">Link 4</a>
  </li>
  <li>
    <a href="#">Link 5</a>
  </li>
</ul>

Answer 1

[Александр]

document.querySelectorAll('ul li a').forEach((link, index) => {
   link.addEventListener('click', () => {
       console.log('Index is', index);
   });
});

или

document.querySelectorAll('a').forEach(link => {
   link.addEventListener('click', event => {
       const parent = event.target.closest('li');
       if (parent !== null) {
           const items = [...parent.parentElement.children];
           const index = items.indexOf(parent);
           console.log('Index is', index);
       }
   });
});

Comments

[Константин Масленников]

Второй вариант отлично подошел, спасибо!

Answer 2

[TRNER]

Для этого можно использовать parentElement

https://codepen.io/Turbin/pen/oNWbgRe