На этом уроке мы познакомимся с дочерними фильтрами (селекторами), которые будем использовать в качестве аргумента функции jQuery("селектор") для фильтрации элементов.

Назначение дочерних фильтров

Дочерние фильтры предназначены для отбора из текущей выборки определённых элементов, т.е. они осуществляют фильтрацию элементов текущей выборки в соответствии с определённым условием. В основу условия любого дочернего фильтра положено отношение между элементом и его родителем, а точнее, каким по счёту дочерним элементом (ребёнком) он ему приходится.

Например, дочерний фильтр :first-child позволяет выбрать из текущей выборки элементы, которые являются первым дочерним элементом (ребёнком) своего родителя.

Давайте рассмотрим пример, в котором разберём как работает дочерний фильтр :first-child.

jQuery - Назначение дочерних фильтров

Фильтр :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) при подсчёте позиции элемента учитывает тип элемента. Это единственное различие между соответствующими элементами первой и второй группой дочерних фильтров.

jQuery - Дочерние фильтры

Виды дочерних фильтров

  • :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>