Этот метод очень похож на то, как это дело обстоит в CSS. С помощью него можно выбрать любой элемент в коллекции ему подобных, если они имеют одного общего родителя.
Приведу пример HTML-разметки, над которой буду тренироваться:
Рассмотрю два метода, которые похожи внешне и внутренне, как может показаться с первого взгляда. Однако, между ними есть тонкая разница.
Метод first
Метод
1
first()
призван возращать первый элемент из коллекции (выборки) этих элементов. Как всегда, чтобы не быть голословным и иметь наглядный пример перед глазами, приведу ниже HTML-разметку, на которой буду тренироваться:
Вот так - только он один и только этот элемент является первым в коллекции элементов
1
li
.
Это объяснимо, если слегка подумать. В переменной
1
wrapper
хранится коллекция элементов; и элементов
1
li
- в том числе.
Коллекция элементов - это не что иное, как массив. А в массиве только один элемент может быть первым. То есть, иметь индекс 0.
Именно поэтому метод
1
.first()
- это всего лишь синоним (alias) другого, более универсального метода
1
.eq()
и может быть записан таким способом -
1
.eq(0)
- вернуть элемент с нулевым индексом, то есть - первый элемент массива.
Антагонистом метода
1
.first()
является метод
1
last()
, который возвращает последний элемент массива. И метод
1
.last()
также можно записать по другому -
1
.eq(-1)
; это также вернет последний элемент массива.
Ок, с методом
1
.first()
вроде разобрались. Двигаемся дальше и рассмотрим метод
1
.first-child()
.
Метод first-child()
Казалось бы, в чем разница? Трудно догадаться, поэтому сразу приведу js-код с описанием работы. В качестве подопытной HTML-разметки будет выступать все та же, приведенная в самом начале статьи.
Вот она - разница в подходе отбора первого элемента. Другими словами, метод
1
.first-child()
находит все элементы, которые являются первыми потомками у своих непосредственных родителей. А в данном случае таких потомков насчиталось аж 4 штуки.
Конечно, можно провести аналогию и рассмотреть метод
1
.last-child()
. Но мне кажется, смысла в этом особого нет - все и так понятно. Выборка будет производиться с точностью до наоборот и будут отбираться последние потомки своих неспосредственных родителей.
На этом думаю закончить сравнительный обзор двух методов -
Так вот, в библиотеке jQuery имеются несколько методов, с помощью которых можно “погулять” по этому DOM-дереву. Расссмотрю каждый из них в отдельности.
Но стоит сразу сказать - как всегда, эти методы очень краткие и предельно понятные. Вся “прелесть” начинается, когда методы объединяют в jQuery-цепочку.
Метод next()
С помощью этого метода возвращается элемент, находящий следующим по отношению к текущему элементу.
Обобщением вышесказанного является такое предложение. Методы
1
next()
и
1
prev()
возвращают один элемент, который является следующим или предшествует текущему элементу. Все элементы имеют одного общего родителя и поиск осуществляется только в этих рамках (другими словами - это sibling-элементы).
Методы nextAll() и prevAll()
Производными от рассмотренных мною выше методов
1
next()
и
1
prev()
являются методы
1
nextAll()
и
1
prevAll()
. Фактически, это те же самые методы
1
next()
и
1
prev()
, но в этих методах возвращается не один элемент, а все оставшиеся элементы, которые являются sibling по отношению к текущему элементу.
. Эти методы работают с sibling-элементами, то есть - имеющими одного родителя. Эти методы возвращают все найденные элементы, которые предшествуют или расположены после текущего элемента.
Методы
1
nextAll()
и
1
prevAll()
очень похожи также на рассмотренный мною в предыдущей статье метод
1
siblings
. Вот только действие метода
1
siblings
более “тупое” (если позволительно так сказать) - этот метод “фигачит” свое действие сразу в обе стороны от текущего элемента, по принципу - “от забора и до обеда”.
Методы
1
nextAll()
и
1
prevAll()
более “интеллектуальные” - они “фигачат” свое действие только в одну сторону - указанную.
Ну, а методы
1
next()
и
1
prev()
самые “умные” - “только один элемент, который ближайший и слева”; “только один элемент, который ближайший и справа”.