На этом уроке мы познакомимся с дочерними фильтрами (селекторами), которые будем использовать в качестве аргумента функции jQuery(«селектор») для фильтрации элементов.
Назначение дочерних фильтров
Дочерние фильтры предназначены для отбора из текущей выборки определённых элементов, т.е. они осуществляют фильтрацию элементов текущей выборки в соответствии с определённым условием. В основу условия любого дочернего фильтра положено отношение между элементом и его родителем, а точнее, каким по счёту дочерним элементом (ребёнком) он ему приходится.
Например, дочерний фильтр :first-child позволяет выбрать из текущей выборки элементы, которые являются первым дочерним элементом (ребёнком) своего родителя.
Давайте рассмотрим пример, в котором разберём как работает дочерний фильтр :first-child .
Фильтр :first-child будем использовать для выбора из документа только тех элементов div , которые являются первым дочерним элементом (ребёнком) своего родителя.
Кроме фильтра :first-child существует и другие дочерние фильтры. Все фильтры можно разделить 2 основные группы:
- Первая группа дочерних фильтров ( :first-child , :last-child , :nth-child(N|odd|even|formula) , :nth-last-child(N|odd|even|formula) , :only-child ) при подсчёте позиции элемента не учитывает тип элемента.
- Вторая группа дочерних фильтров ( :first-of-type , :last-of-type , :nth-of-type(N|odd|even|formula) , :nth-last-of-type(N|odd|even|formula) , :only-of-type ) при подсчёте позиции элемента учитывает тип элемента. Это единственное различие между соответствующими элементами первой и второй группой дочерних фильтров.
Виды дочерних фильтров
:first-child — выбирает элементы, которые являются первым дочерним элементом (ребёнком) своего родителя.
Например, выбрать элементы div , которые расположены в section и являются первым дочерним элементом своего родителя:
:first-of-type — выбирает элементы, которые являются первым дочерним элементом (ребёнком) данного типа (тега) своего родителя.
Например, выбрать все элементы div в документе, которые являются первым дочерним элементом данного типа ( div ) своего родителя:
:last-child — выбирает элементы, которые являются последним дочерним элементом (ребёнком) своего родителя.
Например, выбрать элементы, которые расположены в section и являются последним дочерним элементом своего родителя:
:last-of-type — выбирает элементы, которые являются последним дочерним элементом (ребёнком) данного типа (тега) своего родителя.
Например, выбрать элементы p , которые являются последним дочерним элементом данного типа своего родителя:
:nth-child(N|odd|even|formula) — выбирает элементы, которые являются N дочерним элементом (ребёнком) своего родителя. В jQuery :nth-селекторы выполнены в соответствии с спецификацией CSS. Это необходимо учитывать при подсчёте элементов, т.к. отсчёт элементов начинается с 1. Таким образом, N может принимать значения 1, 2, 3 и т.д. Кроме числа N также можно указывать слова odd , even и формулу ( an+b ):
odd — выбирает элементы, которые являются нечётным дочерним элементом (ребёнком) своего родителя.
even — выбрать элементы, которые являются чётным дочерним элементом (ребёнком) своего родителя.
an+b — выбрать элементы, которые являются an+b дочерним элементом (ребёнком) своего родителя. Числа а и b задаются пользователями, а n — это счётчик. Например: $(«p:nth-child(2n+1)») — выбирает элементы, которые являются 1, 3, 5, 7. дочерним элементом своего родителя. Т.е. 1 (2*0+1=1), 3 (2*1+1=3), 5 (2*2+1=5), 7(2*3+1=7).
Например, выбрать элементы, которые расположены в элементе ul и являются 2 дочерним элементом (ребёнком) своего родителя:
:nth-last-child(N|odd|even|formula) — выбирает элементы, которые являются N дочерним элементом (ребёнком) своего родителя. Отсчёт элементов ведётся с конца. Кроме числа N также можно указывать слова odd , even и формулу ( an+b ).
Например, выбрать элементы p , которые расположены в элементе div и являются 3n (3, 6, 9) дочерним элементом (ребёнком) с конца своего родителя.
:nth-of-type(N|odd|even|formula) — выбирает элементы, которые являются N дочерним элементом (ребёнком) данного типа своего родителя. Кроме числа N также можно указывать слова odd , even и формулу ( an+b ).
Например, выбрать элементы p , которые расположены в элементе div и являются чётным (2, 4, . ) дочерним элементом (ребёнком) своего родителя.
:nth-last-of-type(N|odd|even|formula) — выбрать элементы, которые являются N дочерним элементом (ребёнком) данного типа своего родителя. Отсчёт элементов ведётся с конца. Кроме числа N также можно указывать слова odd , even и формулу ( an+b ).
Например, выбрать элементы p , которые расположены в элементе div и являются нечётным (1, 3, . ) дочерним элементом (ребёнком) с конца своего родителя.
:only-child — выбрать элементы, которые являются единственным дочерним элементом (ребёнком) своего родителя.
Например, выбрать элементы div , которые являются единственным дочерним элементом (ребёнком) своего родителя.
:only-of-type — выбрать элементы, которые являются единственным дочерним элементом (ребёнком) данного типа (тега) своего родителя.
Например, выбрать элементы p , которые являются единственным дочерним элементом (ребёнком) данного типа своего родителя.
Определение и применение
jQuery метод .children() возвращает дочерние элементы каждого элемента в наборе совпавших элементов, дополнительно может фильтроваться с помощью заданного селектора.
Обращаю Ваше внимание, что метод .children() отличается от метода .find() тем, что позволяет осуществить поиск элементов только на одном уровне вниз по дереву DOM, а метод .find() может пройти несколько уровней вложенности, чтобы выбрать всех потомков элемента.
jQuery метод .children(), как и большинство методов для фильтрации не возвращает текстовые узлы, чтобы получить все дочерние элементы, включая текстовые узлы и узлы комментариев Вы можете воспользоваться методом .contents().
jQuery синтаксис:
Добавлен в версии jQuery
Значения параметров
| Параметр | Описание |
|---|---|
| selector | Строка селектор, использующаяся в качестве дополнительного фильтра. Если дополнительно указывается селектор, то выбор дочернего элемента (добавление в коллекцию jQuery) осуществляет только в том случае, если он соответствует этому селектору. Необязательный параметр. |
Пример использования
В этом примере с использованием jQuery метода .children() мы выбираем все дочерние элементы элементов в документе, и с помощью метода .css() задаем им сплошную границу размером 1 пиксель зеленого цвета со всех сторон, в результате чего стили были применены ко всем элементам в документе.
Во втором случае мы используем метод .children() с дополнительным фильтром, в которм мы указываем, что выбор дочернего элемента осуществляет только в том случае, если он соответствует классу active, в результате чего был выбран только один элемент в документе.
Результат нашего примера:
Пример использования метода .children()
В следующем примере мы рассмотрим отличие методов .children() и .find():
В этом примере с использованием jQuery метода .click() мы при нажатии на элемент (кнопка) с классом children вызываем функцию, которая с помощью метода .css() устанавливает всем элементам цвет заднего фона белый. Кроме того, с использованием jQuery метода children() выбираем все дочерние элементы элементов
Также с использованием jQuery метода .click() мы при нажатии на элемент (кнопка) с классом find вызываем функцию, которая с помощью метода .css() устанавливает всем элементам цвет заднего фона белый. С использованием jQuery метода .find() выбирает все потомки элементов
Результат нашего примера:
Отличие метода .find() от .children() jQuery перемещения
пример
Чтобы выбрать дочерние элементы элемента, вы можете использовать метод children() .
Измените цвет всех .parent элементов элемента .parent :
Метод принимает необязательный аргумент selector который может использоваться для фильтрации возвращаемых элементов.