jQuery - Селекторы (иерархические)

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

jQuery - иерархические селекторы

Иерархические селекторы можно разделить на 2 группы:

  • Селекторы, имеющие вертикальную связь между элементами (предок-потомок, родитель-ребёнок).

    jQuery - отношение предок-потомок

    jQuery - отношение родитель-ребёнок

  • Селекторы, имеющие горизонтальную связь между элементами. В DOM-дереве горизонтальная связь существует только между сиблингами. Сиблинги (сёстры/братья) – это элементы, которые имеют одного родителя.

    jQuery - отношение брат/сестра


Иерархические селекторы:

  • ancestor descendant (предок потомок) - выбирает элементы descendant, у которых один из предков является элементом ancestor. Другими словами, селектор "ancestor descendant" выбирает элементы descendant, которые являются потомками элемента ancestor.

    Например, выбрать все элементы p, которые расположены внутри элементов div:

    jQuery - селектор ancestor(потомок) descendant(предок)

    <body>
      <div>
        <p>...</p><!--Будет выбран этот элемент-->
        <main>
          <div>...</div>
          <p>...</p><!--Будет выбран этот элемент-->
          <div>...</div>
        </main>
        <p>...</p><!--Будет выбран этот элемент-->
      </div>
      <p>...</p>
      <section>
        <p>...</p>
        <div>
          <p>...</p><!--Будет выбран этот элемент-->
          <div>...</div>
          <p>...</p><!--Будет выбран этот элемент-->
        </div>
        <p>...</p>
      </section>
    
      <script>
        $("div p");
        //Не забывайте что выборку необходимо делать всегда после того как браузер уже построил DOM-дерево
        $(function() {
          $("div p");
        }; 
      </script>
    </body>
    

  • parent>child (родитель>ребёнок) - выбирает элементы child, у которых родитель является элементом parent. Другими словами, селектор "parent>child" выбирает элементы child, которые являются детьми элемента parent. В отличие от предыдущего селектора, данный селектор работает только с прямыми связями между элементами.

    Например, с помощью jQuery найдём потомков (все элементы p), у которых родитель является элементом div:

    jQuery - parent>child (родитель>ребёнок)

    <body>
      <div>
        <p>...</p><!--Будет выбран этот элемент-->
        <main>
          <div>...</div>
          <p>...</p><!--Будет выбран этот элемент-->
          <div>...</div>
        </main>
        <p>...</p><!--Будет выбран этот элемент-->
      </div>
      <p>...</p>
      <section>
        <p>...</p>
        <div>
          <p>...</p><!--Будет выбран этот элемент-->
          <div>...</div>
          <p>...</p><!--Будет выбран этот элемент-->
        </div>
        <p>...</p>
      </section>
    
      <script>
        $("div>p");
        //Не забывайте что выборку необходимо делать всегда после того как браузер уже построил DOM-дерево
        $(function() {
          $("div>p");
        }; 
      </script>
    </body>
    

    Выбрать все элементы li, которые являются детьми элемента <ul class="topnav">:

    <ul class="topnav">
      <li>Item 1</li><!--Этот элемент будет выбран, т.к. он является ребёнком элемента ul с class="topnav"-->
      <li>Item 2 <!--Этот элемент будет выбран, т.к. он является ребёнком элемента ul с class="topnav"-->
        <ul>
        <li>Nested item 1</li><!--Этот элемент не будет выбран, т.к. он не является ребёнком элемента ul с class="topnav". Он является потомком элемента ul с class="topnav".-->
        <li>Nested item 2</li><!--Этот элемент не будет выбран, т.к. он не является ребёнком элемента ul с class="topnav". Он является потомком элемента ul с class="topnav".-->
        <li>Nested item 3</li><!--Этот элемент не будет выбран, т.к. он не является ребёнком элемента ul с class="topnav". Он является потомком элемента ul с class="topnav".-->
        </ul>
      </li>
      <li>Item 3</li><!--Этот элемент будет выбран, т.к. он является ребёнком элемента ul с class="topnav"-->
    </ul>
     
    <script>
    $( "ul.topnav > li" );
    </script>
    

  • prev+next (предыдущий+следующий) - выбирает элементы next, каждый из которых расположен непосредственно (сразу же) за элементом prev. Кроме этого элементы prev и next должны являться по отношению друг к другу сиблингами (т.е. иметь одного родителя).

    Например, выбрать элементы p, каждый из которых расположен сразу же за элементом div. Кроме этого, элементы div и p по отношению друг к другу должны являться сиблингами (братьями, сёстрами, соседями), т.е. иметь одного родителя:

    jQuery - prev+next (предыдущий+следующий)

    <body>
      <div>
        <p>...</p>
        <main>
          <div>...</div>
          <p>...</p><!--Будет выбран этот элемент-->
          <div>...</div>
        </main>
        <p>...</p>
      </div>
      <p>...</p><!--Будет выбран этот элемент-->
      <section>
        <p>...</p>
        <div>
          <div>...</div>
          <p>...</p><!--Будет выбран этот элемент-->
          <p>...</p>
        </div>
        <p>...</p><!--Будет выбран этот элемент-->
      </section>
    
      <script>
        $("div+p");
        //Не забывайте что выборку необходимо делать всегда после того как браузер уже построил DOM-дерево
        $(function() {
          $("div+p");
        }; 
      </script>
    </body>
    

    Выбрать все элементы input, которые расположены сразу же за элементом label. Кроме этого элементы input и label должны являться по отношению друг к другу сиблингами, т.е. иметь одного родителя.

    <form>
      <label for="name">Имя:</label>
      <input name="name" id="name"><!--Этот элемент будет выбран, т.к. он расположен сразу же за элементом label и является по отношению к нему сиблингом-->
      <fieldset>
        <label for="email>Email:</label>
        <input name="email" id="email"><!--Этот элемент будет выбран, т.к. он расположен сразу же за элементом label и является по отношению к нему сиблингом-->
      </fieldset>
    </form>
    <input name="none"><!--Этот элемент выбран не будет, т.к. он не расположен сразу же за элементом label-->
     
    <script>
    $( "label + input" );
    </script>
    

  • prev~sibling (предыдущий~сиблинг) - выбирает элементы sibling, которые расположены после элемента prev. Элементы prev и sibling должны быть по отношению друг к другу сиблингами, т.е. иметь одного родителя.

    Например, выбрать элементы p, которые расположены после элемента div. Кроме этого, элементы div и p по отношению друг к другу должны быть сиблингами, т.е. иметь одного родителя:

    jQuery - prev~sibling (предыдущий~сиблинг)

    <body>
      <div>
        <p>...</p>
        <main>
          <div>...</div>
          <p>...</p><!--Будет выбран этот элемент-->
          <div>...</div>
        </main>
        <p>...</p>
      </div>
      <p>...</p><!--Будет выбран этот элемент-->
      <section>
        <p>...</p>
        <div>
          <div>...</div>
          <p>...</p><!--Будет выбран этот элемент-->
          <p>...</p><!--Будет выбран этот элемент-->
        </div>
        <p>...</p><!--Будет выбран этот элемент-->
      </section>
    
      <script>
        $("div~p");
        //Не забывайте что выборку необходимо делать всегда после того как браузер уже построил DOM-дерево
        $(function() {
          $("div~p");
        }; 
      </script>
    </body>
    

    Например, найти все элементы div, которые являются по отношению к элементу с id="prev" сиблингами и расположены после него:

    <body>
      <div>...</div><!--Не будет выбран, т.к. расположен перед #prev-->
      <span id="prev">...</span><!--Элемент с id="prev"-->
      <div>...</div><!--Элемент будет выбран, т.к. он является div, расположен после #prev и является по отношению к нему сиблингом--> 
      <div><!--Элемент будет выбран, т.к. он является div, расположен после #prev и является по отношению к нему сиблингом--> 
        <div id="small">...</div><!--Элемент не будет выбран, т.к. он не является по отношению к нему сиблингом--> 
      </div>
      <span>...</span><!--Элемент не будет выбран, т.к. он не является div--> 
      <div>...</div><!--Элемент будет выбран, т.к. он является div, расположен после #prev и является по отношению к нему сиблингом--> 
     
      <script>
        $( "#prev ~ div" );
      </script>
    


   JavaScript и jQuery 0    1472 0

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

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