jQuery - популярная JavaScript библиотека, которая упрощает работу с DOM и AJAX. Одна из полезных функций jQuery - это метод index(), который возвращает индекс элемента в наборе. Это пригодится для навигации по элементам, сортировки, фильтрации данных. В статье рассмотрим разные способы использования index(), реальные кейсы и примеры кода.
Как работает метод index()
Метод index() можно вызывать с аргументом или без него. Разберем подробнее каждый случай.
Вызов без аргументов
Если вызвать index() без параметров, он вернет позицию первого элемента в наборе относительно его соседних элементов:
Вернет индекс li с текстом "Item 1" равный 0, так как это первый li элемент в ul
$("ul li").first().index(); // 0 Вызов с DOM элементом
Если передать в index() DOM узел, будет возвращен индекс этого узла в исходном jQuery объекте:
Вернет индекс элемента #bar равный 1
$("#foo1, #bar, #baz").index( document.getElementById("bar") ); // 1 
Вызов со строкой-селектором
При передаче селектора в виде строки, будет возвращен индекс первого элемента из исходного объекта, который соответствует этому селектору:
Вернет индекс первого найденного div, равный 3
$("p, div, li").index("div"); // 3 Вызов с объектом jQuery
Если в index() передать другой объект jQuery, то вернется индекс первого элемента этого объекта в исходном массиве:
Вернет индекс первого элемента из переданного объекта, равный 1
$("#foo1, #bar, #baz").index($("#bar")); // 1 Применение в реальных задачах
Рассмотрим несколько типичных задач, которые можно решить при помощи метода index().
Выделение активного пункта меню
Часто требуется визуально выделить текущий активный пункт меню. Узнать какой именно пункт активен, можно используя index():
$('#menu a').on('click', function() { var index = $(this).index('#menu a'); $('#menu li').removeClass('active'); $('#menu li:eq(' + index + ')').addClass('active'); }); По нажатию на ссылку получаем ее индекс среди всех элементов меню и добавляем активный класс нужному элементу li.
Показ слайда по индексу
На многих сайтах есть слайдеры, где можно пролистывать изображения или контент. При клике на миниатюры, нужно показать соответствующий слайд. Здесь index() также поможет:
$('.thumbs img').on('click', function() { var index = $(this).index(); $('.slides').slick('slickGoTo', index); }) Получаем индекс кликнутой миниатюры и переходим на этот слайд в слайдере.
Изменение z-index элементов
Расположение блоков по z-оси тоже может зависеть от индекса в DOM. Например, чтобы последний элемент располагался выше всех:
$('.box').each(function() { var index = $(this).index(); $(this).css('z-index', 100 - index); }); Чем больше индекс - тем ниже z-index. Последний элемент получит наибольшее значение.
Другие способы получения индексов
Помимо index(), существуют и другие методы для работы с индексами элементов.
Метод eq()
Метод eq() позволяет получить элемент по его индексу в наборе, индексация начинается с 0:
$('div').eq(5); // пятый div В отличие от index(), метод eq() возвращает jQuery объект, а не число.
Метод get()
Аналогично eq(), метод get() возвращает DOM элемент по указанному индексу:
$('div').get(3); // четвертый div (индекс 3) Другие способы получения индексов
Сравнение методов
Рассмотренные методы eq(), get() и index() похожи, но имеют различия:
- index() возвращает число - индекс
- eq() и get() возвращают элемент по индексу
- В eq() индексация с 0, в index() - с 1
- index() учитывает положение относительно соседних элементов
- eq() и get() работают только в пределах одного набора
Какой метод выбрать - зависит от конкретной задачи.
Методы сортировки данных
Иногда вместо получения индексов проще отсортировать данные нужным образом. jQuery предоставляет для этого методы:
- sort() - сортировка элементов
- first(), last() - первый и последний элемент
- filter() - фильтрация элементов в наборе
Например, отсортировать div блоки по возрастанию их ширины:
$('div').sort(function(a, b) { return $(a).width() - $(b).width(); }); Практические советы по применению
Используя индексы в JavaScript, следует помнить что:
- Индексы могут меняться при манипуляциях с DOM
- Лучше опираться на уникальные ID элементов
- Полезно сочетать с методами eq(), filter() для гибкости
Рассмотрим пример более надежного подхода - используем data атрибут вместо индекса при выделении элемента:
$('#menu a').on('click', function() { var id = $(this).data('id'); $('#menu li').removeClass('active'); $('#menu li[data-id="' + id + '"]').addClass('active'); }); Такой код заработает корректно, даже если менять разметку меню.
