Вы здесь: Главная >> Jquery-учебник >> Получаем в jQuery доступ к элементу по индексу
Обучающие курсы:
Получаем в jQuery доступ к элементу по индексу
Как получить в jQuery доступ к элементу по индексу
Итак, мы уже разобрались с тем, как получать коллекцию элементов с помощью функции $ () и механизма селекторов.
Большинство же методов библиотеки jQuery позволяет изменить какое-либо свойство сразу всех элементов коллекции. Например, выведем во всех тегах текст «Добрый день!»
Это, конечно, удобно. Но иногда необходимо получить доступ к какому-либо отдельному элементу коллекции. Прежде чем обратиться к конкретному элементу, следует с помощью свойства length узнать количество элементов в коллекции,
Кроме того, можно воспользоваться методом size ().
Теперь, когда мы знаем количество элементов, можно приступить к перебору всех элементов коллекции.
Получить доступ к элементу можно, указав его индекс в квадратных скобках. Нумерация начинается с нуля. В качестве примера выведем текст «Добрый день!» только во втором теге р.
var elems = $ («р») ;
if (elems.size() >= 2) <
elems[1].innerHTML = «Добрый день!»;
>
else <
alert(«Элемента для вывода нет!»);
>
Обратите внимание на тот факт, что доступ по индексу возвращает ссылку на DOM-элемент. Поэтому изменить содержимое можно с помощью свойства innerHTML объекта document. Применить метод jQuery text () можно только после нахождения элемента.
Вместо квадратных скобок можно использовать метод get (). Метод имеет следующий формат.
Если индекс элемента не указан, то возвращается массив DOM-элементов,
var elems = $(«р»).get();
alert(«Количество DOM-элементов » + elems.length);
Указание параметра позволяет получить доступ к конкретному элементу. Нумерация элементов начинается с 0. В качестве примера во всех тегах р выведем индекс текущего абзаца.
Все рассмотренные способы позволяли получить доступ к конкретному DOM-элементу. Если необходимо получить доступ к элементу коллекции jQuery, то следует использовать метод eq (). Нумерация элементов начинается с 0. Переделаем наш предыдущий пример и используем метод jQuery html () вместо свойства innerHTML объекта document,
Метод slice () позволяет получить срез коллекции. Возвращает новую коллекцию элементов. Имеет следующий формат.
Следует учитывать, что нумерация позиций начинается с 0, а конечная позиция не попадает в диапазон возвращаемых значений. Выделим первую ссылку в коллекции.
А теперь выделим только вторую и третью ссылки.
Если второй параметр не указан, то будут возвращены элементы от начальной позиции до конца коллекции. Выделим все ссылки, начиная с третьей.
В случае указания отрицательного значения позиции будут отсчитываться с конца коллекции. Выделим две последние ссылки.
Пронумеруем все ссылки в документе с помощью метода slice ().
С помощью метода index () можно получить индекс элемента на странице. Если элемент не найден, то возвращается значение -1. Нумерация элементов начинается с нуля. Метод имеет следующий формат,
При щелчке на абзаце выведем его индекс.
$(«р»).click(function() <
alert(«Индекс: » + $(«р»).index(this));
>);
Абзац 1 Абзац 2 Абзац 3 Абзац 4
Метод each () позволяет перебрать все элементы коллекции без использования циклов. Имеет следующий синтаксис,
В параметре Функция обратного вызова указывается ссылка на функцию следующего формата.
Все параметры являются необязательными. Если в параметре Индекс указать переменную, то на каждой итерации в нее будет передаваться текущий индекс элемента в коллекции. Нумерация начинается с 0. Выведем индекс элемента во всех тегах div.
Текущий элемент доступен внутри функции через указатель this. Обратите внимание, указатель this ссылается на текущий элемент объектной модели документа, а не на элемент коллекции jQuery. По этой причине применять методы jQuery для этого элемента нельзя. В последнем примере для вывода текста внутри тегов div мы использовали свойство innerHTML объекта document, а не метод из библиотеки jQuery. Если необходимо использовать методы из библиотеки jQuery, то предварительно следует найти элемент с помощью функции $ (). В качестве примера заменим свойство innerHTML на jQuery-метод html () .
Если в параметре Элемент DOM указать переменную, то на каждой итерации в нее будет передаваться ссылка на текущий элемент DOM. Эту переменную можно использовать вместо указателя this.
Если внутри функции вернуть значение false, то выполнение метода each () будет остановлено. При индексе, равном двум, прервем выполнение метода.
Во всех этих примерах мы использовали анонимную функцию. Если необходимо вызвать обычную функцию, то ее имя указывается в качестве параметра метода each () без скобок.
В качестве примера использования метода each () получим URL-адреса всех ссылок в документе (листинг 3.1).
Листинг 3.1.
Получение URL-адресов всех ссылок
Материал из JQuery
Соответствует элементу, занимающему позицию под номером index, среди уже выбранных с помощью селектора someSelector элементов. Нумерация элементов начинается с 0.
Начиная с jQuery-1.8, можно выбирать элементы с конца, указывая отрицательный index. -1 — последний элемент, -2 — предпоследний и т. д. Отметим, что одноименный метод — .eq() может принимать отрицательные значения во всех версиях jQuery.
| $(‘div:eq(0)’) | вернет первый div-элемент на странице. |
| $(‘div:eq(-1)’) | вернет последний div-элемент на странице (будет работать начиная с jQuery-1.8). |
| $(‘div p:eq(1)’) | вернет второй параграф, лежащий внутри div-элемента на странице. |
| $(‘div p.box:eq(1)’) | вернет второй параграф с классом box, лежащий внутри div-элемента на странице. |
Замечание 1: :eq() не является частью официальной CSS спецификации, поэтому jQuery-запросы с его использованием будут выполнены без помощи нативной функции querySelectorAll(), что снизит скорость выполнения запроса в современных браузерах. Поэтому вместо селектора :eq() более эффективно будет использовать одноименный метод .eq(): $('someSelectors').eq(index);
В действии
Пример 1
Найдем и выделим второй li-элемент на странице и пятый элемент p внутри последнего ul-элемента:
May 20, 2015
Достаточно интересные методы — и , особенно в сочетании друг с другом. Поэтому и решил объединить рассмотрение этих методов. Каждый по отдельности — методы просты и мало показательны.
Но для начала вкратце (по другому и не получиться) опищу каждый из методов, по возможности своими словами.
Метод index
Работа метода проста — он возвращает индекс (порядковый номер) указанного элемента среди группы ему подобных.
Синтаксис метода также простой:
И пример для иллюстрации:
Сделать выборку всех элементов и вернуть индекс элемента с классом :
Найти элемент с классом среди соседних элементов и вернуть его индекс:
Как видим, способы получения индекса элемента разные, а результат один.
Метод eq
Метод прямопротивоположен методу . Этот метод возвращает элемент (как объект) по его индексу (порядковому номеру).
Если взять предыдущую HTML-разметку, то такой javascript-код:
… изменит содержимое второго по счету элемента на “Secondo”. Почему второго? Как можно догадаться, результатом выборки является массив элементов; а в массиве индексирование элементов начинается с нуля (0).
Методы eq и index
Рассмотренные выше примеры использования методов и просты и понятны. И неинтересны.
Гораздо более интеерсным примером является случай объединения обоих методов в jQuery-цепочке.
Приведу такой гипотетический пример:
Javascript-код, написанный выше, читается таким образом:
- сделать выборку всех элементов с классом
- при клике мыши на любом из этих элементов выполнить функцию:
- сделать выборку всех элементов
- вернуть индекс активного элемента из выборки —
- вернуть активный элемент по его индексу —
- для возвращенного элемента изменить его содержимое на значение его индекса —
- всем соседним (sibling) элементам установить значение в —
Пример рабочий, поэтому его можно свободно попробовать.
В принципе, на этом все.
- Like
- Tweet
- +1
RxJs — map
Первый «серьезный» метод в моей RxJs-копилке знаний. На самом деле все просто — этот метод получает на вход поток, обрабатывает каждый ev. … Continue reading
