Получить индекс дом елемента

@Евгений 86 · Регистрация: 21.03.2016

Студворк — интернет-сервис помощи студентам

Добрый день! пишу слайдер на и для дальнейших манипуляций мне нужен индекс слайда(item). Но не знаю как его получить.
Разметка элементарная

HTML5
1
2
3
4
5
6
7
8
<div class="slider-container">
        <div class="slider">
            <ul class="slider--list">
                <li class="slider-item active"></li>
                <li class="slider-item"></li>
                <li class="slider-item"> </li>
            </ul>
    </div> </div>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
const left = document.querySelector('.slider-btn-left');
const right = document.querySelector('.slider-btn-right');
 
right.addEventListener('click', (e) => {
    e.preventDefault();
    const container = document.querySelector('.slider-container'); 
    let items = document.querySelectorAll('.slider-item'); // получаю коллекцию item
    let arrayItems = Array.prototype.slice.call(items); // получаю массив из элементов
    let activeItem = arrayItems.find(items => items.classList.contains('active')); // получаю активный слайд
    let reqItem = activeItem.nextSibling.nextSibling; // получаю следующий слайд(item) пропускаю текстовый узел
    let reqIndex = reqItem.indexOf(); // ???? вот тут загвоздка. как правильно определить индекс элемента
 });

Добавлено через 2 минуты
загвоздка на 11 строчке как правильно получить индекс?

@diadiavova · 05.09.2018, 14:33

https://developer.mozilla.org/... /findIndex

@Евгений 86 · 05.09.2018, 14:35 **[ТС]**

я читал ее
у меня в консоль ошибка
Если быть точнее не могу понять как правильно написать

@diadiavova · 06.09.2018, 00:33

Евгений 86, тут для начала надо определиться, индекс какого множества ты ищешь. Если искать через document, то это будет индекс элемента во всем документе, если же нужен индекс в конкретном списке, то в нем и надо искать.

JavaScript
1
console.log([...document.querySelectorAll(".slider--list>.slider-item")].findIndex(li => li.classList.contains("active")));

@amr-now · 06.09.2018, 17:47

Евгений 86, согласно смыслу задачи:

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
</head>
<body>
 
    <div class="slider-container">
        <div class="slider">
            <ul class="slider--list">
                <li class="slider-item active">Один</li>
                <li class="slider-item">Два</li>
                <li class="slider-item">Три</li>
            </ul>
        </div>
    </div>
 
    <script>
        let items = document.querySelectorAll('.slider-item'); // получаю коллекцию item
        let reqIndex = -1;
        let count = items.length;
        for (var i = 0; i < count; ++i) {
            if (items[i].className === "slider-item active" && i < count - 1) {
                reqIndex = i + 1;
                break;
            }
        }
        console.log(`${reqIndex} ${items[reqIndex].innerText}`);
    </script>
</body>
</html>

Новые блоги и статьи Все статьи Все блоги /
Подключение Box2D v3 к SDL3 для Android: физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .
Влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .

@diadiavova 7258 / 2605 / 744 Регистрация: 11.04.2015 Сообщений: 4,149 Записей в блоге: 43
	05.09.2018, 14:33
	https://developer.mozilla.org/... /findIndex 0

@Евгений 86 1 / 1 / 3 Регистрация: 21.03.2016 Сообщений: 400
	05.09.2018, 14:35 [ТС]
	я читал ее у меня в консоль ошибка Если быть точнее не могу понять как правильно написать 0