- find() – выбор потомков
- children() – выбор дочерних элементов
- closest() – выбор ближайшего предка
- next() – выбор следующего элемента
- prev() – выбор предыдущего элемента
- siblings() – выбор сиблингов
- parent() – получение родителя
- offsetParent() – получение ближайшего позиционированного предка
- contents() - выбрать все дочерние узлы
- Комментарии
Навигация по элементам в 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>
элементов.