Как по клику найти индекс элемента среди его соседей?

Question

[DenKuzmin17]

как это на javascript переписать?

$('.slide').click(function () {
   var index = $(this).index();
   console.log(index)
});

При нажатии .slide отдаёт свой индекс в консоль.

Answer 1

[0xD34F]

document.addEventListener('click', ({ target: t }) => {
  if (t = t.closest('.slide')) {
    const index = Array.prototype.indexOf.call(
      t.parentNode.children,
      t
    );
    console.log(index);
  }
});

или

for (const n of document.getElementsByClassName('slide')) {
  n.addEventListener('click', onClick);
}

function onClick() {
  let index = 0;
  for (let n = this; n = n.previousElementSibling; index++) ;
  console.log(index);
}

или

document.querySelectorAll('.slider').forEach(function(slider) {
  slider.querySelectorAll(':scope > *').forEach((n, i) => {
    n.dataset.index = i;
    n.addEventListener('click', this);
  });
}, e => console.log(+e.currentTarget.dataset.index));

Answer 2

[Stimulate]

var slides = document.getElementsByClassName('slide');
for(let i = 0 ; i < slides.length ; i++) {
  slides[i].addEventListener('click', function() {
    console.log(i);
  });
}

Answer 3

[Сергей Соколов]

document.querySelectorAll('.slide').forEach(
	(el, i) => el.addEventListener('click', () => console.log(1+i))
)