Иерархические селекторы в jQuery 4

В прошлых уроках вы узнали, что такое селектор и познакомились с базовыми селекторами. В этом уроке вы изучите иерархические селекторы.

Виды иерархических селекторов в jQuery 4:

• $(‘sel sel’) — поиск вложенных элементов (потомков). Пример: $('ul li') — выбрать все элементы li внутри ul;
• $(‘sel > sel’) — выбор только дочерних элементов (прямые потомки). Пример: $('ul > li') — выбрать только прямые дочерние элементы li внутри ul;
• $(‘sel + sel’) — выбор одного следующего соседнего элемента (следующий соседний элемент того же уровня);
• $(‘sel ~ sel’) — выбор всех соседних элементов (все следующие соседние элементы того же уровня).

Рассмотрим каждый из них по отдельности.

Для примера будем работать со списком ul.menu, внутри которого будет располагаться еще один список ul.sub-menu:

<!-- Список, меню с двумя уровнями вложенности -->
<ul class="menu"> <!-- Первый уровень -->
  <li>О компании</li>
  <li>
    Каталог
    <ul class="sub-menu"> <!-- Второй уровень -->
      <li>Седан</li>
      <li>Хэтчбек</li>
      <li>Универсал</li>
      <li>Купе</li>
    </ul>
  </li>
  <li>Услуги</li>
  <li>Фотогалерея</li>
  <li>Контакты</li>
</ul>

<!-- Подключаем библиотеку jQuery -->
<script src="jquery-4.0.0.js"></script>

<script>
  $(document).ready(function() {
    $('.menu li').css('border', '2px solid #2ecc71'); // Выбор всех элементов потомков.
  });
</script>

Выбор всех элементов потомков $(‘sel sel’)

Выберем все элементы списка li и зададим им зелёную рамочку:

$('.menu li').css('border', '2px solid #2ecc71');

При этом выделятся элементы как главного списка ul.menu, так и вложенного ul.sub-menu.

Метод css("border", "2px solid #2ecc71") мы пока не изучали, он задаёт рамку для элементов. Работу с CSS-методами в jQuery 4 мы изучим в следующих модулях. Пока просто перепишите код.

Выбор только дочерних элементов $(‘sel > sel’)

Выделяем рамочкой только элементы главного списка, а не вложенного. Для этого нам понадобится символ больше >:

$('.menu > li').css('border', '2px solid #2ecc71');

Рамкой выделились только элементы главного списка.

Выбор одного соседнего (следующего) элемента $(‘sel + sel’)

Рассмотрим пример, при котором у нас имеется обычная статья с заголовком и несколькими абзацами. Нам нужно сделать так, чтобы шрифт первого абзаца был больше, чем у остальных. Для этого понадобится символ плюс +.

<h1>Страны</h1>
<p>
  Рассмотрим страны в алфавитном порядке.</p>
<p>
  <b>Австралия</b> (англ. Australia), официальная форма - Австралийский Союз, или Содружество Австралии - государство в Южном полушарии, занимающее одноимённый материк, остров Тасмания и несколько других островов Индийского и Тихого океанов, является шестым по площади, государством в мире.</p>
<p>
  <b>Австрия</b> (нем. Österreich), официальное название - Австрийская Республика (Republik Österreich) - государство в Центральной Европе. Население составляет 8 858 млн человек (2019), площадь - 83 879 кв км. Занимает 98-е место в мире по численности населения и 113-е по территории.</p>

<!-- Подключаем библиотеку jQuery -->
<script src="jquery-4.0.0.js"></script>

<!-- Шрифт у первого абзаца больше  -->
<script>
  $(document).ready(function() {
    $('h1 + p').css('font-size', '22px');
  });
</script>

Шрифт у первого абзаца Рассмотрим страны в алфавитном порядке. стал больше.

Выбор всех соседних (следующих) элементов $(‘sel ~ sel’)

$('h1 ~ p').css('font-size', '22px') — знак тильда ~ выберет все абзацы p, которые расположены после заголовка h1 и находятся с ним на одном уровне вложенности.

Добавьте еще несколько абзацев, один до заголовка h1 и два в конце, внутри тега div и посмотрите на результат:

<p>У этого абзаца шрифт не изменится.</p>

<h1>Страны</h1>
<p>Рассмотрим страны в алфавитном порядке.</p>
<p>
  <b>Австралия</b> (англ. Australia), официальная форма - Австралийский Союз, или Содружество Австралии - государство в Южном полушарии, занимающее одноимённый материк, остров Тасмания и несколько других островов Индийского и Тихого океанов, является шестым по площади, государством в мире.
</p>
<p>
  <b>Австрия</b> (нем. Österreich), официальное название - Австрийская Республика (Republik Österreich) - государство в Центральной Европе. Население составляет 8,858 млн человек (2019), площадь - 83 879 кв км. Занимает 98-е место в мире по численности населения и 113-е по территории.
</p>

<div>
  <p>У этого абзаца шрифт не изменится.</p>
  <p>У этого абзаца шрифт не изменится.</p>
</div>

<!-- Подключаем библиотеку jQuery -->
<script src="jquery-4.0.0.js"></script>

<!-- Шрифт у всех следующих абзацев одного уровня, больше  -->
<script>
  $(document).ready(function() {
    $('h1 ~ p').css('font-size', '22px');
  });
</script>

Обратите внимание, над заголовком мы разместили один абзац и в конце два абзаца внутри тега div, их шрифт не увеличился, потому что они идут перед заголовком, и внутри тега div (не на одном уровне с заголовком).

Важно помнить: чем длиннее селектор $('sel sel sel sel...'), тем он тяжелее. Из-за этого может снизиться производительность скрипта. Об этом мы поговорим в экспертном курсе, в модуле архитектура и производительность.

Кратко

• $('sel sel') — потомки;
• $('sel > sel') — прямые потомки;
• $('sel + sel') — следующий сосед;
• $('sel ~ sel') — все следующие соседи.