Навигация по элементам в jQuery

В этой статье рассмотрим методы jQuery для поиска в DOM-дереве необходимых элементов, связанных с элементами текущего набора определёнными отношениями.

find() – выбор потомков

Нахождение потомков для каждого элемента текущего набора в jQuery выполняется с помощью find().

Указать искомые элементы можно посредством селектора, ссылки на DOM-элементы или набора jQuery. В качестве результата этот метод возвращает новый объект jQuery, состоящий из найденных элементов.

Например, выбрать все элементы с классом «carousel-items», расположенные в «.carousel»:

<div class="carousel">
  <div class="carousel-items">
    <div class="carousel-item">...</div>
    <div class="carousel-item">...</div>
    <div class="carousel-item">...</div>
  <div class="carousel-items">
</div>

<script>
var carousel = $('.carousel');
// выберем потомков с классом carousel-item для элементов набора carousel
var items = carousel.find('.carousel-item');

// пример указания элементов в find посредством ссылки на DOM-элементы
// var elements = document.querySelectorAll('.carousel-item');
// var items = carousel.find(elements);

// с помощью набора jQuery
// var elements = $('.item');
// var items = carousel.find(elements);
</script>

children() – выбор дочерних элементов

Кроме find() в jQuery имеется ещё один похожий метод: children().

children() в отличие от find() выполняет поиск элементов только среди детей каждого элемента текущего набора (т.е. не опускается ниже одного уровня по DOM-дереву).

Для выбора всех дочерних элементов для каждого элемента текущего набора children() необходимо вызвать без аргументов:

<div class="message">
  <h3>...</h3>
  <p>...</p>
</div>
<div class="message">
  <h3>...</h3>
  <p>...</p>
</div>

<script>
  const elements = $('.message').children();
</script>

Если необходимо выбрать не все, а только определённые, то можно использовать селектор.

Например, выберем не все элементы, а только <h3>:

const elements = $('.message').children('h3');

closest() – выбор ближайшего предка

В jQuery поиск ближайшего предка (включая сам этот элемент) выполняется с помощью метода closest().

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

Для указания искомый элементов можно использовать селектор, ссылку на DOM-элементы и набор jQuery.

Например, выбрать <ul> в качестве ближайшего предка для элементов текущего набора:

<ul>
  <li>One</li>
  <li class="active">Two</li>
  <li>Three</li>
</ul>

<script>
  // текущий набор
  var elements = $('li.active');
  // выберем ближайших предков по селектору ul для элементов, содержащихся в наборе elements
  var ul = elements.closest('ul');
</script>

next() – выбор следующего элемента

В jQuery получить для каждого элемента набора следующий элемент (при необходимости соответствующий указанному селектору) можно с помощью метода next().

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

Например, выберем <li> расположенный после «.active»:

<ul>
  <li>One</li>
  <li class="active">Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ul>

<script>
  const element = $('li.active').next('li');
</script>

Если необходимо выбрать не конкретный элемент, а просто следующий, то в этом случае вызывать next() необходимо без аргументов:

const element = $('li.active').next();

Когда необходимо получить не один, а все следующие элементы для каждого элемента набора, следует использовать nextAll().

Например:

const elements = $('li.active').nextAll();

Кроме next() и nextAll() в jQuery имеется ещё nextUntil(). Он позволяет получить все следующие элементы до указанного.

Например, выберем все <li> кроме последнего, расположенные после «.active»:

const elements = $('li.active').nextUntil('li','li:last-child');

prev() – выбор предыдущего элемента

В jQuery кроме методов для выбора следующих элементов имеются аналогичные для получения предыдущих: prev(), prevAll() и prevUntil().

Например:

<div class="boxes">
  <div></div>
  <div></div>
  <div></div>
  <div class="current"></div>
  <div></div>
</div>

<script>
  var prev = $('.current').prev();
</script>

siblings() – выбор сиблингов

Получение сиблингов для каждого элемента набора в jQuery осуществляется с помощью метода siblings().

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

<ul>
  <li>One</li>
  <li class="active">Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ul>

<script>
  var elements = $('li.active').siblings();
</script>

parent() – получение родителя

В jQuery получение родительского элемента для каждого элемента текущего набора осуществляется с помощью parent().

При необходимости в parent() мы можем передать селектор и тем самым указать, что нам нужны только элементы соответствующие ему.

Например, получим родительский элемент для <li> с классом active:

<ul>
  <li>One</li>
  <li class="active">Two</li>
  <li>Three</li>
</ul>

<script>
  const elements = $('li.active').parent();
</script>

В jQuery кроме parent() имеется ещё метод parents(). Он в отличие от первого получает для элементов набора не только их непосредственных родителей, а вообще всех предков (до <html>).

Например, получим всех предков для <li> с классом active:

<body>
  <ul>
    <li>One</li>
    <li class="active">Two</li>
    <li>Three</li>
  </ul>
  ...

<script>
  const elements = $('li.active').parents(); // <ul>, <body>, <html>
</script>

При необходимости можно выбрать не всех предков, а только тех, которые соответствует указанному селектору.

Например, получим предков, соответствующего селектору .one для элемента с классом three:

<div class="one">
  <div class="two">
    <div class="three">...</div>
  </div>
</div>

<script>
  var elements = $('.three').parents('.one');
</script>

Ограничить подъём по дереву DOM при получении предков можно посредством parentsUntil():

Например, получим предков являющимися <div> для элемента с классом active (при этом поиск предков должен ограничиваться элементом соответствующим селектору .container:

<div class="container">
  <div class="one">
    <div class="two">
      <div class="active">...</div>
    </div>
  </div>
</div>

<script>
  var elements = $('.three').parentsUntil('div', '.container');
</script>

offsetParent() – получение ближайшего позиционированного предка

В jQuery для получения ближайшего позиционированного предка можно воспользоваться offsetParent(). Этот метод не принимает никаких аргументов.

Этот метод может использоваться в операциях расчета смещений для выполнения анимации и размещения объектов на странице.

Например, найдём offsetParent для элемента с классом active:

<div class="container">
  <div class="one" style="position: relative;">
    <div class="two">
      <div class="active">...</div>
    </div>
  </div>
</div>

<script>
  var elements = $('.active').offsetParent();
</script>

contents() - выбрать все дочерние узлы

В jQuery метод children() используется, когда нужно получить все дочерние узлы (элементы, текстовые узлы и комментарии) для каждого элемента текущего набора.

Этот метод не принимает никаких аргументов.

.contents() и .children() аналогичны, за исключением того, что первый включает в себя текстовые узлы и комментарии.

Метод .contents() можно также использовать для получения содержимого iframe, если iframe находится в том же домене, что и главная страница.

Начиная с jQuery 3.2, .contents() также возвращает содержимое <template> элементов.