jQuery - Селекторы (дочерние фильтры)
На этом уроке мы познакомимся с дочерними фильтрами (селекторами), которые будем использовать в качестве аргумента функции jQuery("селектор")
для фильтрации элементов.
Назначение дочерних фильтров
Дочерние фильтры предназначены для отбора из текущей выборки определённых элементов, т.е. они осуществляют фильтрацию элементов текущей выборки в соответствии с определённым условием. В основу условия любого дочернего фильтра положено отношение между элементом и его родителем, а точнее, каким по счёту дочерним элементом (ребёнком) он ему приходится.
Например, дочерний фильтр :first-child
позволяет выбрать из текущей выборки элементы, которые являются первым дочерним элементом (ребёнком) своего родителя.
Давайте рассмотрим пример, в котором разберём как работает дочерний фильтр :first-child
.
Фильтр :first-child
будем использовать для выбора из документа только тех элементов div
, которые являются первым дочерним элементом (ребёнком) своего родителя.
<section> <div id="id-2"></div><!--Будет выбран этот div, т.к. он является первым ребёнком своего родителя - элемента section--> <p id="id-3"></p> <div id="id-4"> <div id="id-7"></div><!--Будет выбран этот div, т.к. он является первым ребёнком своего родителя - элемента div с id="id-4"--> <p id="id-8"></p> <div id="id-9"></div> </div> <p id="id-5"></p> <div id="id-6"></div> </section> <script> $("div:first-child"); </script>
Кроме фильтра :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
и являются первым дочерним элементом своего родителя:<body> <section> <div>...</div><!-- Будет выбран этот элемент, т.к. он расположен в section и является первым дочерним элементом своего родителя--> <p>...</p> <div>...</div> <section> <div>...</div> <section> <p>...</p> <div>...</div> </section> <script> //Выберет элементы div, расположенные в section. //А затем отфильтрует их, т.е. оставит только те элементы, которые //являются первым дочерним элементом своего родителя $("section div:first-child"); </script>
:first-of-type - выбирает элементы, которые являются первым дочерним элементом (ребёнком) данного типа (тега) своего родителя.
Например, выбрать все элементы
div
в документе, которые являются первым дочерним элементом данного типа (div
) своего родителя:<body> <section> <div>...</div><!--Этот элемент будет выбран, т.к. он является первым дочерним элементом (ребёнком) данного типа своего родителя (section)--> <p>...</p> <div>...</div><!--Этот элемент не будет выбран, т.к. он является вторым дочерним элементом данного типа (div) своего родителя (section)--> <section> <div>...</div><!--Этот элемент будет выбран, т.к. он является первым дочерним элементом (ребёнком) данного типа (div) своего родителя (body)--> <section> <p>...</p> <div>...</div><!--Этот элемент будет выбран, т.к. он является первым дочерним элементом данного типа (div) своего родителя (section)--> </section> <script> //Выберет элементы div, расположенные в section. //А затем отфильтрует их, т.е. оставит только те которые являются //первым дочерним элементом данного типа своего родителя $("div:first-of-type"); </script>
:last-child - выбирает элементы, которые являются последним дочерним элементом (ребёнком) своего родителя.
Например, выбрать элементы, которые расположены в
section
и являются последним дочерним элементом своего родителя:<body> <section> <div>...</div> <p>...</p> <div>...</div><!--Будет выбран этот элемент, т.к. он расположен в section и является последним дочерним элементом (ребёнком) своего родителя (section)--> </section> <div>...</div> <section> <div>...</div> <p>...</p><!--Будет выбран этот элемент, т.к. он расположен в section и является последним дочерним элементом (ребёнком) своего родителя (section)--> </section> <script> //Выберет элементы, которые расположены в section и являются //последним дочерним элементом (ребёнком) своего родителя $("section :last-child"); //или так: $("section *:last-child"); </script>
:last-of-type - выбирает элементы, которые являются последним дочерним элементом (ребёнком) данного типа (тега) своего родителя.
Например, выбрать элементы
p
, которые являются последним дочерним элементом данного типа своего родителя:<body> <section> <div>...</div> <p>...</p><!--Будет выбран этот элемент, т.к. он является последним дочерним элементом (ребёнком) данного типа (p) своего родителя (section)--> <div>...</div> </section> <div>...</div> <section> <p>...</p> <p>...</p><!--Будет выбран этот элемент, т.к. он является последним дочерним элементом (ребёнком) данного типа (p) своего родителя (section)--> </section> <script> //Выберет элементы p, которые являются //последним дочерним элементом данного типа (p) своего родителя $("p:last-of-type"); </script>
: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 дочерним элементом (ребёнком) своего родителя:<ul> <li>...</li> <li>...</li><!--Этот элемент будет выбран, т.к. он расположен в элементе ul и является вторым дочерним элементом (ребёнком) своего родителя--> <li>...</li> </ul> <ul> <li>...</li> </ul> <ul> <li>...</li> <li>...</li><!--Этот элемент будет выбран, т.к. он расположен в элементе ul и является вторым дочерним элементом (ребёнком) своего родителя--> <li>...</li> <li>...</li> </ul> <script> $("ul :nth-child(2)"); //или $("ul *:nth-child(2)"); </script>
:nth-last-child(N|odd|even|formula) - выбирает элементы, которые являются
N
дочерним элементом (ребёнком) своего родителя. Отсчёт элементов ведётся с конца. Кроме числаN
также можно указывать словаodd
,even
и формулу (an+b
).Например, выбрать элементы
p
, которые расположены в элементеdiv
и являются 3n (3, 6, 9) дочерним элементом (ребёнком) с конца своего родителя.<div> <p>...</p><!--Этот элемент будет выбран, т.к. он p, расположен в элементе div и является 3n (3*4=12) дочерним элементом (ребёнком) с конца своего родителя--> <p>...</p> <p>...</p> <div>...</div> <p>...</p> <p>...</p> <p>...</p><!--Этот элемент будет выбран, т.к. он p, расположен в элементе div и является 3n (3*2=3) дочерним элементом (ребёнком) с конца своего родителя--> <p>...</p> <p>...</p> <p>...</p><!--Этот элемент будет выбран, т.к. он p, расположен в элементе div и является 3n (3*1=3) дочерним элементом (ребёнком) с конца своего родителя--> <p>...</p> <p>...</p> </div> <div> <p>...</p> <p>...</p> <div> <script> $("div p:nth-last-child(3n)"); </script>
:nth-of-type(N|odd|even|formula) - выбирает элементы, которые являются N дочерним элементом (ребёнком) данного типа своего родителя. Кроме числа
N
также можно указывать словаodd
,even
и формулу (an+b
).Например, выбрать элементы
p
, которые расположены в элементеdiv
и являются чётным (2, 4, ...) дочерним элементом (ребёнком) своего родителя.<div> <p>...</p> <p>...</p><!--Этот элемент будет выбран, т.к. он p, расположен в элементе div и является чётным (2) дочерним элементом (ребёнком) своего родителя--> <p>...</p> <div>...</div> <p>...</p><!--Этот элемент будет выбран, т.к. он p, расположен в элементе div и является чётным (4) дочерним элементом (ребёнком) своего родителя--> <p>...</p> <div>...</div> </div> <div> <div>...</div> <div>...</div> <p>...</p> <div>...</div> <p>...</p><!--Этот элемент будет выбран, т.к. он p, расположен в элементе div и является чётным (2) дочерним элементом (ребёнком) своего родителя--> <div> <script> $("div p:nth-of-type(even)"); </script>
:nth-last-of-type(N|odd|even|formula) - выбрать элементы, которые являются
N
дочерним элементом (ребёнком) данного типа своего родителя. Отсчёт элементов ведётся с конца. Кроме числаN
также можно указывать словаodd
,even
и формулу (an+b
).Например, выбрать элементы
p
, которые расположены в элементеdiv
и являются нечётным (1, 3, ...) дочерним элементом (ребёнком) с конца своего родителя.<div> <p>...</p><!--Этот элемент будет выбран, т.к. он p, расположен в элементе div и является нечётным (5) дочерним элементом (ребёнком) с конца своего родителя--> <p>...</p> <p>...</p><!--Этот элемент будет выбран, т.к. он p, расположен в элементе div и является нечётным (3) дочерним элементом (ребёнком) с конца своего родителя--> <div>...</div> <p>...</p> <p>...</p><!--Этот элемент будет выбран, т.к. он p, расположен в элементе div и является нечётным (1) дочерним элементом (ребёнком) с конца своего родителя--> <div>...</div> </div> <div> <div>...</div> <div>...</div> <p>...</p> <div>...</div> <p>...</p><!--Этот элемент будет выбран, т.к. он p, расположен в элементе div и является нечётным (1) дочерним элементом (ребёнком) с конца своего родителя--> <div> <script> $("div p:nth-last-of-type(odd)"); </script>
:only-child - выбрать элементы, которые являются единственным дочерним элементом (ребёнком) своего родителя.
Например, выбрать элементы
div
, которые являются единственным дочерним элементом (ребёнком) своего родителя.<section> <div>...</div> <p>...</p> </section> <section> <div>...</div><!--Этот элемент будет выбран, т.к. он является div и единственным дочерним элементом (ребёнком) своего родителя--> </section> <script> $("div:only-child"); </script>
:only-of-type - выбрать элементы, которые являются единственным дочерним элементом (ребёнком) данного типа (тега) своего родителя.
Например, выбрать элементы
p
, которые являются единственным дочерним элементом (ребёнком) данного типа своего родителя.<section> <div>...</div> <p>...</p><!--Этот элемент будет выбран, т.к. он является p и единственным дочерним элементом (ребёнком) данного типа (p) своего родителя--> </section> <section> <p>...</p> <p>...</p> </section> <script> $("p:only-of-type"); </script>
Комментарии ()