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

Question

[DenKuzmin17]

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

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

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

Answer 1

[0xD34F]

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

или

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

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

или

document.querySelectorAll('.slider').forEach(function({ children }) {
  [].forEach.call(children, (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))
)