Как узнать индекс нажатого элемента массива

@maks_7 · Регистрация: 14.10.2014

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

Есть такой список:

HTML5
1
2
3
4
5
6
7
<ul id="navigation">
   <li class="nav active"></li>
   <li class="nav"></li>
   <li class="nav"></li>
   <li class="nav"></li>
   <li class="nav"></li>
</ul>

Как узнать индекс нажатого элемента? Вот что я делаю:

JavaScript
1
2
3
var nav = document.getElementsByClassName('nav');
nav.onclick = function() {
}

А дальше ничего не получается. Правильно я понимаю, nav - это массив?

@vettel · 12.11.2016, 12:27

Сообщение от maks_7

Правильно я понимаю, nav - это массив?

Не совсем. Метод gelElementsByClass возвращает коллекцию, не массив. И эту коллекцию нужно перебрать в цикле, и на каждый элемент повесить обработчик. Допустим, так:

JavaScript
1
2
3
4
5
for(var i = 0; i < nav.length; ++i) {
    nav[i].onclick = function() {
        //do something
    }
}

@maks_7 · 12.11.2016, 14:36 **[ТС]**

vettel, спасибо! vettel, почему-то не работает, не посмотрите?

HTML-код:

HTML5
1
2
3
4
5
6
7
<ul id="pagination">
   <li class="pag"></li>
   <li class="pag"></li>
   <li class="pag"></li>
   <li class="pag"></li>
   <li class="pag"></li>
</ul>

CSS - стили:

CSS
1
2
3
4
5
6
7
8
9
10
11
#pagination{
list-style-type: none;
}
.pag {
 display:inline-block;
 margin-right: 10px; 
 width:15px;
 height:15px;
 background-color: blue; 
 cursor:pointer;
}

Javascript:

JavaScript
1
2
3
4
5
for(var i = 0; i < pag.length; ++i) {
    pag[i].onclick = function() {
        alert(i);
    }
}

https://jsfiddle.net/vlad35/etLz9xg5/1/

@renat_dmitriev · 12.11.2016, 14:53

maks_7,

JavaScript
1
var nav = document.getElementsByClassName('nav');

забыли

@zlobobr · 12.11.2016, 16:29

код не верный. Вспомните задачe на setTimeout и область видимости переменной i.
Когда будет действие то она будет равна 5 и все нажатия выведут 5!

JavaScript
1
2
3
4
5
6
7
8
9
10
11
var pag=document.getElementsByClassName('pag');
 
for(var i = 0; i < pag.length; ++i) {
    pag[i].onclick = (function(val){
    return function (){
    return console.log(val);
    }
    })(i);
        
  
}

немного проще будет добавить data-item=#; в список и проверять так nav.getAttribute('data-item')

удачи

Новые блоги и статьи Все статьи Все блоги /
Программный контроль заполнения реквизита табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать контроль заполнения реквизита табличной части. . .	wmic не является внутренней или внешней командой Maks 02.04.2026 Решение: DISM / Online / Add-Capability / CapabilityName:WMIC~~~~ Отсюда: https:/ / winitpro. ru/ index. php/ 2025/ 02/ 14/ komanda-wmic-ne-naydena/	Программная установка даты и запрет ее изменения Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: при создании документов установить период списания автоматически. . .	Вывод данных в справочнике через динамический список Maks 01.04.2026 Реализация из решения ниже выполнена на примере нетипового справочника "Спецтехника" разработанного в конфигурации КА2. Задача: вывести данные из ТЧ нетипового документа. . .
Функция заполнения текстового поля в реквизите формы документа Maks 01.04.2026 Алгоритм из решения ниже реализован на нетиповом документе "ВыдачаОборудованияНаСпецтехнику" разработанного в конфигурации КА2, в дополнении к предыдущему решению. На форме документа создается. . .	К слову об оптимизации kumehtar 01.04.2026 Вспоминаю начало 2000-х, университет, когда я писал на Delphi. Тогда среди программистов на форумах активно обсуждали аккуратную работу с памятью: нужно было следить за переменными, вовремя. . .	Идея фильтра интернета (сервер = слой+фильтр). Hrethgir 31.03.2026 Суть идеи заключается в том, чтобы запустить свой сервер, о чём я если честно мечтал давно и давно приобрёл книгу как это сделать. Но не было причин его запускать. Очумелые учёные напечатали на. . .	Модель здравосоХранения 6. ESG-повестка и устойчивое развитие; углублённый анализ кадрового бренда anaschu 31.03.2026 В прикрепленном документе раздумья о том, как можно поменять модель в будущем