Как выбрать последний элемент jquery
Навигация по элементам в jQuery
В этой статье рассмотрим методы jQuery для поиска в DOM-дереве необходимых элементов, связанных с элементами текущего набора определёнными отношениями.
find() – выбор потомков
Указать искомые элементы можно посредством селектора, ссылки на DOM-элементы или набора jQuery. В качестве результата этот метод возвращает новый объект jQuery, состоящий из найденных элементов.
children() – выбор дочерних элементов
children() в отличие от find() выполняет поиск элементов только среди детей каждого элемента текущего набора (т.е. не опускается ниже одного уровня по DOM-дереву).
Для выбора всех дочерних элементов для каждого элемента текущего набора children() необходимо вызвать без аргументов:
Если необходимо выбрать не все, а только определённые, то можно использовать селектор.
Например, выберем не все элементы, а только
closest() – выбор ближайшего предка
Если более точно, то closest() выбирает для каждого элемента текущего набора первый элемент, соответствующий указанному (поиск начинается с самого элемента, а потом вверх по предкам).
Для указания искомый элементов можно использовать селектор, ссылку на DOM-элементы и набор jQuery.
Например, выбрать
- в качестве ближайшего предка для элементов текущего набора:
next() – выбор следующего элемента
При этом следующий элемент по отношению к исходному должен являться сиблингом (или другими словами находиться с ним на одном уровне вложенности). В качестве результата next() возвращает новый объект jQuery, состоящий из найденных элементов.
Если необходимо выбрать не конкретный элемент, а просто следующий, то в этом случае вызывать next() необходимо без аргументов:
prev() – выбор предыдущего элемента
siblings() – выбор сиблингов
При этом, если нужно выбрать не все, а только определённые сиблинги, то можно указать соответствующий селектор. В качестве результата siblings() возвращает новый набор jQuery, состоящий из найденных элементов.
parent() – получение родителя
При необходимости в parent() мы можем передать селектор и тем самым указать, что нам нужны только элементы соответствующие ему.
При необходимости можно выбрать не всех предков, а только тех, которые соответствует указанному селектору.
Ограничить подъём по дереву DOM при получении предков можно посредством parentsUntil() :
Например, получим предков являющимися
offsetParent() – получение ближайшего позиционированного предка
Этот метод может использоваться в операциях расчета смещений для выполнения анимации и размещения объектов на странице.
Например, найдём offsetParent для элемента с классом active :
В jQuery метод children() используется, когда нужно получить все дочерние узлы (элементы, текстовые узлы и комментарии) для каждого элемента текущего набора.
Этот метод не принимает никаких аргументов.
Работа с выбранными элементами
»» В данной статье используется исходный код для примеров. Сохраните эту страницу для тестирования приведенных ниже примеров.
В большинстве случаев работа с jQuery осуществляется в два этапа, следуя одному и тому же шаблону:
а второй — в выполнении над каждым элементом набора одной или нескольких операций, приводящих к созданию конечного набора.
В этой статье мы сосредоточим свое внимание на первом из этапов. Будут рассмотрены методы jQuery, позволяющие управлять выбранным набором и корректировать его состав в точном соответствии с конкретными задачами. Обычно исходят из некоего предварительно выбранного набора элементов, воздействуя на который, добиваются того, чтобы в нем остались лишь действительно необходимые элементы.
Расширение набора выбранных элементов
Метод add() позволяет добавить в существующий объект jQuery дополнительные элементы. Различные варианты вызова этого метода приведены в таблице ниже:
| Вариант вызова | Описание |
|---|---|
| add(селектор), add(селектор, контекст) | Добавляет в текущий набор дополнительные элементы, соответствующие селектору, без учета и с учетом контекста |
| add(HTMLElement), add(HTMLElement[]) | Добавляет в текущий набор элемент или массив элементов HTMLElement |
| add(jQuery) | Добавляет в текущий набор содержимое указанного объекта jQuery |
Подобно многим методам jQuery, метод add() возвращает объект jQuery, который можно использовать для вызова других методов, в том числе и для последующих вызовов метода add(). Пример использования метода add() для расширения ранее найденного набора приведен в ниже:
В этом сценарии для добавления элементов в первоначальный набор используются три подхода: с помощью другого селектора, с помощью объектов HTMLElement и с помощью другого объекта jQuery. Построив нужный набор объектов, мы вызываем метод css(), устанавливая для их свойств border значения, обеспечивающие окружение надписей рамками, прорисованными толстыми двойными линиями, как показано на рисунке:
Сужение набора выбранных элементов
Существует ряд методов, позволяющих удалять элементы из существующего набора. Их краткое описание приведено в таблице ниже. Каждый из этих методов возвращает новый объект jQuery, содержащий урезанный набор элементов. Объект jQuery, для которого вызывается метод, остается неизменным:
| Метод | Описание |
|---|---|
| eq(индекс) | Исключает из набора все элементы, кроме элемента с указанным индексом |
| filter(условие) | Исключает из набора элементы, не соответствующие указанному условию. Подробное описание допустимых типов аргументов приводится далее |
| first() | Исключает из набора все элементы, кроме первого |
| has(), has(jQuery), has(HTMLElement), has(HTMLElement[]) | Исключает из набора элементы, у которых отсутствуют потомки, соответствующие указанному селектору или объекту jQuery, или потомки, не включающие указанные Объекты HTMLElement |
| last() | Исключает из набора все элементы, кроме последнего |
| not(условие) | Исключает из набора все элементы, соответствующие указанному условию |
| slice(начало, конец) | Исключает из набора все элементы, индексы которых выходят за пределы указанного диапазона |
Сужение набора до одного элемента
Простейшими методами, с помощью которых можно сократить набор выбранных элементов, являются методы first(), last() и eq(). Эти три метода позволяют выбрать конкретный элемент на основании его позиции в наборе элементов, содержащихся в объекте jQuery. Соответствующий пример приведен ниже:
Обратите внимание, что метод eq() вызывается дважды. Если аргумент имеет положительное значение, отсчет индексов начинается с первого элемента в наборе, содержащемся в объекте jQuery. В случае отрицательного значения аргумента индексы отсчитываются в обратном направлении, начиная с последнего элемента. Результат работы сценария приведен на рисунке:
Сужение набора до элементов, индексы которых принадлежат к заданному диапазону
Если необходимо оставить в выбранном наборе лишь элементы, индексы которых принадлежат к заданному диапазону, используется метод slice(). Соответствующий пример приведен ниже:
В качестве аргументов метод slice() принимает значения начального и конечного индексов. Отсчет индексов ведется от нуля, причем элемент, которому соответствует конечный индекс, в результирующий набор не включается. Поэтому аргументам 0 и 2 соответствует выбор первых двух элементов.
Если второй аргумент опущен, то выбор элементов продолжается до конца существующего набора. Следовательно, использованию единственного аргумента 4 для набора из шести элементов соответствует выбор последних двух элементов (с индексами 4 и 5). Результат представлен на рисунке:
Фильтрация элементов
Метод filter() позволяет задать условие. Элементы, не удовлетворяющие заданному условию, исключаются из набора. Возможные варианты использования метода filter(), соответствующие различным способам задания условия, описаны в таблице ниже:
| Вариант вызова | Описание |
|---|---|
| filter(селектор) | Исключает из набора элементы, которые не соответствуют указанному селектору |
| filter(HTMLElement) | Исключает из набора все элементы, кроме указанного |
| filter(jQuery) | Исключает из набора все элементы, которые не содержатся в указанном объекте jQuery |
| filter(function(index)) | Указанная функция вызывается для каждого элемента набора; из набора исключаются все элементы, для которых функция возвращает значение false |
Пример использования всех четырех вариантов задания аргументов метода filter() приведен ниже:
Первые три методики не нуждаются в особых пояснениях. Фильтры в них определяются с помощью селектора, другого объекта jQuery и объекта HTMLElement. Четвертая методика, основанная на использовании функции, требует дополнительных пояснений.
Предоставляемая jQuery функция выполняется по одному разу для каждого элемента набора, содержащегося в объекте jQuery. Если эта функция возвращает true, то элемент, для которого она была вызвана, остается в наборе. Если же возвращаемым значением является false, то элемент удаляется из набора. Функция принимает единственный аргумент — индекс элемента, для которого она вызывается. Кроме того, переменная this устанавливается так, что она указывает на текущий обрабатываемый объект HTMLElement. В данном примере значение true возвращается в тех случаях, когда атрибут src или индекс элемента имеют указанные значения.
Метод not() работает аналогично методу filter(), но обращает процесс фильтрации. Возможные варианты вызова метода not(), аналогичны вызовам метода filter().
Сужение набора до элементов, имеющих определенных потомков
Метод has() можно использовать для того, чтобы оставить в наборе выбранных элементов только те из них, у которых есть определенные потомки, указываемые либо с помощью селектора, либо с помощью одного или нескольких объектов HTMLElement. Пример использования метода has() приведен ниже:
В этом сценарии из выбранного набора исключаются элементы, у которых отсутствуют определенные потомки. В первом случае, когда используется селектор, из набора удаляются элементы, не имеющие ни одного потомка img, атрибут src которого был бы равен astor. Во втором случае, когда используется объект jQuery, то же самое происходит с элементами, не имеющими ни одного потомка со значением атрибута for, содержащим букву р. Результат работы сценария показан на рисунке:
Преобразование набора выбранных элементов
Метод map() обеспечивает гибкий способ использования одного объекта jQuery для создания другого. В качестве аргумента методу map() передается функция. Эта функция вызывается для каждого из элементов, входящих в исходный объект jQuery, а возвращаемые ею объекты HTMLElement включаются в результирующий объект jQuery.
Пример использования метода map() приведен ниже:
В этом сценарии выполняются две операции преобразования. Первая из них, в которой используется программный интерфейс DOM, возвращает первый из элементов img, встречающихся в каждом элементе набора. Вторая операция, в которой используются возможности объекта jQuery, возвращает первый элемент набора, содержащегося в объекте jQuery, который возвращается методом children() (этот метод возвращает дочерние узлы каждого из элементов, содержащихся в объекте jQuery).
Тестирование набора выбранных элементов
Чтобы выяснить, соответствует ли хотя бы один из выбранных элементов заданному условию, можно использовать метод is(). Возможные варианты использования метода is(), аналогичны методам фильтрации not() и filter().
Если в качестве аргумента передается функция, то jQuery вызывает эту функцию для каждого элемента в объекте jQuery, передавая ей индекс данного элемента в качестве аргумента и устанавливая переменную this так, чтобы она указывала на сам элемент. Пример использования метода is() приведен ниже:
В этом сценарии мы проверяем, содержит ли объект jQuery элемент со значением атрибута src, который включает строку ‘rose.png’.
Возврат к предыдущему состоянию измененного набора выбранных элементов
В jQuery предусмотрено сохранение состояний выбранного набора элементов при его изменении путем вызова методов цепочки. Из этого обстоятельства можно извлечь выгоду с помощью двух методов, описанных в таблице ниже:
| Метод | Описание |
|---|---|
| end() | Выталкивает текущий выбранный набор из стека и возвращает предыдущий набор |
| andSelf() | Добавляет предыдущий выбранный набор к текущему |
Метод end() можно использовать для возврата предыдущего выбранного набора, что позволяет выбрать некоторые элементы, расширить или сузить его, выполнить некоторые операции, а затем вернуться к исходному набору, как показано в примере ниже:
В этом сценарии мы начинаем с того, что выбираем все элементы label в документе. Далее мы сужаем выборку, вызывая метод first() (для получения первого подходящего элемента), а затем устанавливаем значение CSS-свойства border с помощью метода css().
Следующим вызывается метод end() для возврата предыдущего выбранного набора (в результате чего вам вновь предоставляются все элементы label, а не только первый), а затем опять вызывается метод css(), на этот раз для установки значения свойства font-size. Результат выполнения сценария показан на рисунке:
Метод andSelf() добавляет содержимое предыдущего выбранного набора, находящегося в стеке, к текущему набору. Пример использования метода andSelf() приведен ниже:
В этом примере сначала выбираются все элементы div с классом dcell, а затем — все элементы img, которые являются их дочерними элементами, для чего используется метод children(). После этого вызывается метод andSelf(), который объединяет предыдущую выборку (элемент div) с текущей (элементы img) в одном объекте jQuery. Наконец для создания рамок вокруг выбранных элементов вызывается метод css(). Результат выполнения сценария показан на рисунке:
Работа с выборкой в jQuery
Получение DOM-элемента из набора
В связи с тем, что возвращаемый в результате выборки набор данных является массивоподобным объектом, мы можем получить в нём DOM-элемент по его индексу.
Например, получим второй элемент из набора:
Отсчёт элементов в выборке jQuery начинается с 0.
Если в выборке нет элемента с указанным индексом, то мы получим undefined :
Для перебора набора jQuery как коллекции DOM-элементов можно использовать цикл for :
Например, получим последний элемент из набора elements :
Кроме получения DOM-элемента по индексу, с помощью get() можно ещё получить массив всех элементов. Для этого нужно вызвать данный метод без аргументов:
Кроме get() аналогичную функциональность предоставляет ещё метод toArray() :
Перебор элементов выборки
В jQuery для перебора набора элементов можно воспользоваться специальным методом each() :
Методу each() в качестве аргумента передаётся анонимная функция с 2 параметрами: index (индекс элемента в наборе) и element (текущий элемент).
Получение индекса элемента в наборе
Передача искомого элемента посредством набора jQuery:
Добавление новых элементов в набор
add() создает новый объект jQuery путём объединения элементов текущего набора и элементов, переданных в этот метод.
1. Например, добавим в набор элементы с классом text :
Указание посредством коллекции DOM-элементов:
Указание в виде набора jQuery:
2. Пример использования в add() только что созданного абзаца:
В этом коде был создан новый абзац и добавлен в набор. При этом он имеется только в наборе, но не на странице. Чтобы данный элемент отобразился на странице, его необходимо туда добавить (например, в ).
Удаление элементов из набора
Указать элементы, которые следует исключить можно по-разному: с помощью селектора, ссылки на DOM-элементы, массива элементов, функции или набора jQuery.
Например, удалим из набора элементы с классом active :
Как использовать селекторы jQuery для выделения элементов страницы
Обычно селекторы jQuery используются для выбора элементов на странице, чтобы затем вызвать методы jQuery для манипулирования ими.
Селекторы jQuery основаны на селекторах CSS, и если вы знаете CSS, то уже имеет базовое представление об идее выбора элементов на странице.
В данном уроке мы рассмотрим селекторы, которые поддерживаются jQuery. Многие из них такие же как и селекторы CSS, но есть и специфические для jQuery. Для каждого селектора приведен пример использования для выбора элемента страницы.
В урок включены следующие разделы:
Основные селекторы
Основные селекторы вам знакомы, если вы когда-нибудь создавали хотя бы один шаблон CSS. скорее всего, вы будете использовать данные селекторы на протяжении 90% всего времени работы с jQuery:
Вы также можете комбинировать несколько селекторов в один с помощью запятой. jQuery выберет все элементы, которые соответствуют любому из селекторов. Например:
Выбор элементов по атрибуту
Основные селекторы отлично подходят в случаях, если нужно выбрать все параграфы на странице или элемент, который нужно выбрать имеет класс CSS или ID.
Однако, иногда нужно выбрать определенный элемент, у которого нет класса или ID, и нет возможности просто добавить класс или ID к данному элементу в разметке. Такая ситуация может сложиться при использовании CMS с фиксированным шаблоном HTML или при работе с контентом, созданным пользователем.
В данной ситуации возможно сузить область выбора с помощью атрибута HTML элемента, который надо выбрать. Например, можно выбрать:
jQuery имеет много селекторов, которые можно использовать для выбора элементов по атрибуту:
=’value’]»)
Вы можете комбинировать селекторы атрибутов для сужения области выбора. Например:
Выбор элементов по содержанию
Если нет возможности сузить область выбора по основным селекторам и по атрибутам, то можно «покопаться» в содержании элемента для определения, подходит он для выбора или нет. jQuery имеет 4 селектора для данного назначения:
Выбор элементов по иерархии
| Селектор | Описание | Пример |
|---|---|---|
| Ребенок | Выбирает элемент(ы), которые являются ребенком (прямым потомком) заданного предка(ов). | // Выбираем все элементы списка с классом «highlight», которые являются ребёнком для списка с ID «nav»: $(«ul#nav > li.highlight») |
| Потомок | Выбирает элемент(ы), которые являются потомками (детьми, внуками и так далее) заданного предка(ов). Это более общая форма селектора Ребенок. | // Выбираем все ссылки внутри списка с ID «nav»: $(«ul#nav a») |
| Следующий соседний элемент | Выбирает элемент(ы), который следует непосредственно за заданным элементом, где оба элемента имеют одного и того же родителя. | // Выбираем все параграфы, которые следуют непосредственно за заголовком H1: $(«h1 + p») |
| Следующий сестринский элемент | Выбирает элемент(ы), который следует за другим элементом, где оба элемента являются потомками одного родителя. Это более обобщенная версия селектора следующий соседний элемент. | // Выбираем все ячейки таблицы после ячейки, которая содержит слово «Hello»: $(«td:contains(‘hello’) td») |
| Первый ребенок | Выбирает элемент(ы), который является первым ребенком его родителя. | // Выбираем первые пункты во всех списках на странице: $(«li:first-child») |
| Последний ребенок | Выбирает элемент(ы), который является последним ребенком его родителя. | // Выбираем последние пункты во всех списках на странице: $(«li:last-child») |
| N-й ребенок | Выбирает элемент(ы), который является n-м ребенком его родителя (смотри примечание ниже). | // Выбираем третьи пункты во всех списках на странице: $(«li:nth-child(3)») |
| Только ребенок | Выбирает элемент(ы), которые являются ребенком родителей, у которых есть только дети. | // Выбираем только элементы в списках с одним пунктом: $(«li:only-child») |
В следующем примере выбирается первая ячейка всех нечетных строк в таблице, которая имеет id «myTable» :
Выбор полей формы
Аналогично, идентификация выбранных элементов в списке select или отмеченных чекбоксов в форме может быть утомительным занятием./
К счастью, jQuery обеспечивает несколько специфических для форм селекторов, которые облегчают жизнь:
Выбор элементов по их положению
jQuery имеет семь селекторов, которые можно использовать для ограничения области поиска на основе позиции элемента:
| Селектор | Описание | Примеры |
|---|---|---|
| :first | Выбирает первый элемент в наборе отобранных элементов. | // Выбираем первый параграф, который имеет класс «myClass»: $(«p.myClass:first») |
| :last | Выбирает последний элемент в наборе отобранных элементов. | // Выбираем последний параграф, который имеет класс «myClass»: $(«p.myClass:last») |
| :eq() | Выбирает единственный элемент в наборе отобранных элементов. Выбор элемента осуществляется по последовательному номеру индекса ( 0 = первый элемент, 1 = второй и так далее). | // Выбираем з-й параграф, который имеет класс «myClass»: $(«p.myClass:eq(2)») |
| :lt() | Выбирает элементы в наборе отобранных элементов, которые расположены перед элементом с заданным индексом. Например, если задан индекс 2 (то есть 3-й элемент), то будут выбраны первые 2 элемента (с индексами 0 и 1). | // /Выбираем первые 2 параграфа, которые имеют класс «myClass»: $(«p.myClass:lt(2)») |
| :gt() | Выбираем элементы в наборе отобранных элементов, которые расположены после элемента с заданным индексом. Например, если задан индекс 2 (то есть 3-й элемент), то будут выбраны все элементы после третьего. | // Выбираем все параграфы, которые имеют класс «myClass», за исключением первых трех: $(«p.myClass:gt(2)») |
| :even | Выбирает все элементы с четными индексами в наборе отобранных элементов. Заметьте, что индексы начинаются с 0, таким образом в действительности отбираются 1-й, 3-й и так далее элементы. | // Выбираем 1й, 3й, 5й, и так далее параграфы, которые имеют класс «myClass»: $(«p.myClass:even») |
| :odd | Выбирает все элементы с нечетными индексами в наборе уже отобранных элементов. Заметьте, что индексы начинаются с 0, таким образом в действительности отбираются 2-й, 4-й и так далее элементы | // Выбираем 2й, 4й, 6й, и так далее параграфы, которые имеют класс «myClass»: $(«p.myClass:odd») |
В следующем примере выбираются все ячейки в первых двух строках таблицы, которая имеет ID «myTable» :
Другие полезные селекторы jQuery
Если ни один из перечисленных селекторов не помог вам выделить нужные элементы, попробуйте использовать следующие селекторы:
В следующем примере выбираются все элементы на странице, кроме заголовков h1 :
Заключение
В данной статье мы рассмотрели, как выбирать элементы с помощью селекторов jQuery. Были разобраны следующие типы селекторов:
Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.elated.com/articles/jquery-selectors/
Перевел: Сергей Фастунов
Урок создан: 19 Августа 2010
Просмотров: 306165
Правила перепечатки
5 последних уроков рубрики «jQuery»
Анимация набора текста на jQuery
Сегодня мы бы хотели вам рассказать о библиотеке TypeIt — бесплатном jQuery плагине. С её помощью можно имитировать набор текста. Если всё настроить правильно, то можно добиться очень реалистичного эффекта.
Временная шкала на jQuery
jQuery плагин для создания временной шкалы.
Заметка: Перезагрузка и редирект на JavaScript
Быстрая заметка, где вы сможете найти парочку JS сниппетов для перезагрузки и перенаправления пользователей через JavaScript.
Рисуем диаграмму Ганта
jQuery плагин для создания диаграммы Ганта.
AJAX и PHP: загрузка файла
Пример того как осуществить загрузку файла через PHP и jQuery ajax.