Перемещение по дереву

Часто удобнее найти один элемент, а от него перейти к нужным: к вложенным, к родителю, к соседям. Такие переходы называют обходом дерева DOM. Каждый метод обхода возвращает новый объект jQuery.

Вниз: find и children

Метод find() ищет по селектору на любой глубине внутри элементов набора. Метод children() берёт только прямых потомков — теги первого уровня вложенности:

<div id="app">
  <ul id="tasks">
    <li>Купить хлеб</li>
    <li>Позвонить Олегу</li>
  </ul>
</div>
 
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
  console.log($('#app').find('li').length);     // 2
  console.log($('#app').children().length);     // 1 — только ul
  console.log($('#tasks').children().length);   // 2
</script>

У #app один прямой потомок — список, а пункты лежат глубже, поэтому их находит только find().

Вверх: parent и closest

parent() возвращает непосредственного родителя. closest() поднимается вверх, начиная с самого элемента, и останавливается на первом, который подходит под селектор:

<ul id="tasks">
  <li>Купить хлеб <button>Удалить</button></li>
</ul>
 
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
  const $button = $('button');
 
  console.log($button.parent().prop('tagName'));     // LI
  console.log($button.closest('ul').attr('id'));     // tasks
</script>

closest() особенно полезен в обработчиках: по нажатой кнопке «Удалить» он находит пункт списка, который надо убрать.

В стороны: siblings, next, prev

<ul>
  <li>Купить хлеб</li>
  <li id="current">Позвонить Олегу</li>
  <li>Написать отчёт</li>
</ul>
 
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
  const $item = $('#current');
 
  console.log($item.siblings().length); // 2
  console.log($item.next().text());     // Написать отчёт
  console.log($item.prev().text());     // Купить хлеб
</script>

siblings() возвращает всех соседей по родителю, кроме самого элемента.

Выбор из набора

Метод	Что оставляет
`first()`	Первый элемент
`last()`	Последний элемент
`eq(1)`	Элемент с индексом 1 (второй), `eq(-1)` — последний
`filter('.done')`	Элементы, подходящие под селектор
`not('.done')`	Элементы, не подходящие под селектор

<ul>
  <li class="done">Купить хлеб</li>
  <li>Позвонить Олегу</li>
  <li>Написать отчёт</li>
</ul>
 
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
  console.log($('li').eq(1).text());            // Позвонить Олегу
  console.log($('li').not('.done').length);     // 2
  $('li').first().css('color', 'gray');
</script>

Первый пункт стал серым, а в консоли — второй пункт и число невыполненных задач.

То же на обычном JavaScript

find() соответствует element.querySelectorAll(), parent() — element.parentElement, closest() — element.closest(), next() — element.nextElementSibling.

Частая ошибка

Путать parent() и closest(). Если разметку пункта позже обернут ещё в один тег, $button.parent() вернёт уже не li, а эту обёртку, и код сломается. $button.closest('li') найдёт пункт при любой глубине вложенности.

Спасибо, что читаете!