Получить индекс дочерних элементов с прослушивателем событий в JavaScript

Без изменения HTML, как я могу получить индекс каждого контейнера слайдов при нажатии?

например. они нажали на 2, как мне получить значение, такое как node[1]?

document.getElementById("slides").addEventListener("click", function(e){
	console.info(e.target);
});

<section id = "slides">
  <div class = "slide">1</div>
  <div class = "slide">2</div>
  <div class = "slide">3</div>
</section>

javascript

17.02.2019 22:41

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

2 684

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Вы можете использовать .indexOf() и .querySelectorAll(), передав ему список div и цель в качестве аргументов.

document.getElementById("slides").addEventListener("click", function(e){
  var nodes = document.querySelectorAll('#slides > .slide');
  console.info([].indexOf.call(nodes, e.target));
});

<section id = "slides">
  <div class = "slide">1</div>
  <div class = "slide">2</div>
  <div class = "slide">3</div>
</section>

17.02.2019 22:47

Ответ принят как подходящий

Пока вы не используете синтаксис стрелочной функции в обратном вызове, вы можете использовать this для ссылки на элемент slides. Используя синтаксис распространения ES6, вы можете распространять его дочерние элементы в массив, а затем использовать indexOf в этом массиве, чтобы получить индекс e.target внутри него:

document.getElementById("slides").addEventListener("click", function(e) {
  const idx = [...this.children]
    .filter(el => el.className.indexOf('slide') > -1)
    .indexOf(e.target);

  if (idx > -1) {
    console.info(`Slide index: ${idx}`);
  }
});

<section id = "slides">
  <div class = "slide">1</div>
  <div class = "slide">2</div>
  <span>Not a slide</span>
  <div class = "slide">3</div>
</section>

Обновлено: Я обновил свой ответ, включив в него только элементы, имеющие класс slide, реализовав метод filter - без этого индекс может быть сброшен родственными элементами, которые не являются слайдами.

В качестве примечания, если sildes содержат другие элементы, а не только текст, замените e.target на e.target.closest(".slide") (проверьте closest совместимость браузера на МДН)

— 17.02.2019 23:05

17.02.2019 22:47