Работа с родителями и потомками
В jQuery получение родительского элемента для каждого элемента текущего набора осуществляется с помощью parent().
При необходимости в parent() мы можем передать селектор и тем самым указать, что нам нужны только элементы соответствующие ему.
В следующем примере мы найдем элемент #test затем найдем его родителя с помощью .parent():
<p>Абзац вне дива.</p>
<div>
<p>Абзац.</p>
<p>Абзац.</p>
<p id="test">Абзац.</p>
<p>Абзац.</p>
<p>Абзац.</p>
</div>
<p>Абзац вне дива.</p>
<script>
const elements = $("#test").parent();
console.log(elements);
</script>Кроме parent() имеется ещё метод parents(). Он в отличие от первого получает для элементов набора не только их непосредственных родителей, а вообще всех предков, вплоть до <html>:
<p>Абзац вне дива.</p>
<div>
<p>Абзац.</p>
<p>Абзац.</p>
<p id="test">Абзац.</p>
<p>Абзац.</p>
<p>Абзац.</p>
</div>
<p>Абзац вне дива.</p>
<script>
const elements = $("#test").parents();
console.log(elements);
</script>При необходимости можно выбрать не всех предков, а только тех, которые соответствует указанному селектору:
<p>Абзац вне дива.</p>
<div>
<p>Абзац.</p>
<p>Абзац.</p>
<p id="test">Абзац.</p>
<p>Абзац.</p>
<p>Абзац.</p>
</div>
<p>Абзац вне дива.</p>
<script>
const elements = $("#test").parents("div");
console.log(elements);
</script>Ограничить подъём по дереву DOM при получении предков можно посредством parentsUntil(). Например, получим предков являющимися <div> для элемента с классом active (при этом поиск предков должен ограничиваться элементом соответствующим селектору .container:
<p>Абзац вне дива.</p>
<div class="container">
<p>Абзац.</p>
<p>Абзац.</p>
<p id="test">Абзац.</p>
<p>Абзац.</p>
<p>Абзац.</p>
</div>
<p>Абзац вне дива.</p>
<script>
const elements = $("#test").parentsUntil("div", ".container");
console.log(elements);
</script>Получение ближайшего позиционированного предка
Метод offsetParent позволяет получать ближайшего спозиционированного предка
элемента. Под понятием спозиционированный подразумевается элемент с CSS свойством position, установленным в значение relative,absolute, или fixed. Метод полезен в анимации и при размещении элементов на странице:
<p>Абзац вне дива.</p>
<div class="container" style="position: relative">
<p>Абзац.</p>
<p>Абзац.</p>
<p id="test">Абзац.</p>
<p>Абзац.</p>
<p>Абзац.</p>
</div>
<p>Абзац вне дива.</p>
<script>
const elements = $("#test").offsetParent();
console.log(elements);
</script>выбрать все дочерние узлы
Метод children() используется, когда нужно получить все дочерние узлы, элементы, текстовые узлы и комментарии, для каждого элемента текущего набора. Этот метод не принимает никаких аргументов.
contents() и children() аналогичны, за исключением того, что первый включает в себя текстовые узлы и комментарии.
Метод contents() можно также использовать для получения содержимого iframe, если iframe находится в том же домене, что и главная страница.