jQuery - Селекторы (дочерние фильтры)

На этом уроке мы познакомимся с дочерними фильтрами (селекторами), которые будем использовать в качестве аргумента функции 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>
    


   JavaScript и jQuery 0    1404 0

Комментарии (0)

    Вы должны авторизоваться, чтобы оставлять комментарии.