Contents:
-
.closest( selector )
- .closest( selector )
- .closest( selector [, context ] )
- .closest( selection )
- .closest( element )
-
.closest( selectors [, context ] )
- .closest( selectors [, context ] )
.closest( selector )Returns: jQuery
Description: For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.
-
version added: 1.3.closest( selector )
-
selector
A string containing a selector expression to match elements against.
-
-
version added: 1.4.closest( selector [, context ] )
-
selector
A string containing a selector expression to match elements against.
-
context
A DOM element within which a matching element may be found.
-
-
version added: 1.6.closest( selection )
-
selection
A jQuery object to match elements against.
-
-
version added: 1.6.closest( element )
-
element
An element to match elements against.
-
Given a jQuery object that represents a set of DOM elements, the .closest()
method searches through these elements and their ancestors in the DOM tree and constructs a new jQuery object from the matching elements. The .parents()
and .closest()
methods are similar in that they both traverse up the DOM tree. The differences between the two, though subtle, are significant:
.closest()
|
|
---|---|
Begins with the current element | Begins with the parent element |
Travels up the DOM tree until it finds a match for the supplied selector | Travels up the DOM tree to the document’s root element, adding each ancestor element to a temporary collection; it then filters that collection based on a selector if one is supplied |
The returned jQuery object contains zero or one element for each element in the original set, in document order | The returned jQuery object contains zero or more elements for each element in the original set, in reverse document order |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
|
Suppose we perform a search for <ul>
elements starting at item A:
1 2 3 |
|
This will change the color of the level-2 <ul>
, since it is the first encountered when traveling up the DOM tree.
Suppose we search for an <li>
element instead:
1 2 3 |
|
This will change the color of list item A. The .closest()
method begins its search with the element itself before progressing up the DOM tree, and stops when item A matches the selector.
We can pass in a DOM element as the context within which to search for the closest element.
1 2 3 4 5 6 7 |
|
This will change the color of the level-2 <ul>
, because it is both the first <ul>
ancestor of list item A and a descendant of list item II. It will not change the color of the level-1 <ul>
, however, because it is not a descendant of list item II.
Examples:
Show how event delegation can be done with closest. The closest list element toggles a yellow background when it or its descendent is clicked.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
|
Demo:
Pass a jQuery object to closest. The closest list element toggles a yellow background when it or its descendent is clicked.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
|
Demo:
.closest( selectors [, context ] )Returns: Arrayversion deprecated: 1.7, removed: 1.8
Description: Get an array of all the elements and selectors matched against the current element up through the DOM tree.
-
version added: 1.4.closest( selectors [, context ] )
-
selectors
An array or string containing a selector expression to match elements against (can also be a jQuery object).
-
context
A DOM element within which a matching element may be found.
-
This signature (only!) is deprecated as of jQuery 1.7 and removed in jQuery 1.8. It was primarily meant to be used internally or by plugin authors.
How can I find an element’s ancestor that is closest up the tree that has a particular class, in pure JavaScript? For example, in a tree like so:
<div class="far ancestor">
<div class="near ancestor">
<p>Where am I?</p>
</div>
</div>
Then I want div.near.ancestor
if I try this on the p
and search for ancestor
.
asked Mar 1, 2014 at 20:05
rvighnervighne
20.5k11 gold badges51 silver badges73 bronze badges
3
Update: Now supported in most major browsers
document.querySelector("p").closest(".near.ancestor")
Note that this can match selectors, not just classes
https://developer.mozilla.org/en-US/docs/Web/API/Element.closest
For legacy browsers that do not support closest()
but have matches()
one can build selector-matching similar to @rvighne’s class matching:
function findAncestor (el, sel) {
while ((el = el.parentElement) && !((el.matches || el.matchesSelector).call(el,sel)));
return el;
}
answered Nov 20, 2014 at 10:43
the8472the8472
40.5k5 gold badges70 silver badges121 bronze badges
11
This does the trick:
function findAncestor (el, cls) {
while ((el = el.parentElement) && !el.classList.contains(cls));
return el;
}
The while loop waits until el
has the desired class, and it sets el
to el
‘s parent every iteration so in the end, you have the ancestor with that class or null
.
Here’s a fiddle, if anyone wants to improve it. It won’t work on old browsers (i.e. IE); see this compatibility table for classList. parentElement
is used here because parentNode
would involve more work to make sure that the node is an element.
answered Mar 1, 2014 at 20:05
rvighnervighne
20.5k11 gold badges51 silver badges73 bronze badges
12
Use element.closest()
https://developer.mozilla.org/en-US/docs/Web/API/Element/closest
See this example DOM:
<article>
<div id="div-01">Here is div-01
<div id="div-02">Here is div-02
<div id="div-03">Here is div-03</div>
</div>
</div>
</article>
This is how you would use element.closest:
var el = document.getElementById('div-03');
var r1 = el.closest("#div-02");
// returns the element with the id=div-02
var r2 = el.closest("div div");
// returns the closest ancestor which is a div in div, here is div-03 itself
var r3 = el.closest("article > div");
// returns the closest ancestor which is a div and has a parent article, here is div-01
var r4 = el.closest(":not(div)");
// returns the closest ancestor which is not a div, here is the outmost article
answered Mar 27, 2018 at 14:54
simbrosimbro
3,2947 gold badges34 silver badges46 bronze badges
4
Based on the the8472 answer and https://developer.mozilla.org/en-US/docs/Web/API/Element/matches here is cross-platform 2017 solution:
if (!Element.prototype.matches) {
Element.prototype.matches =
Element.prototype.matchesSelector ||
Element.prototype.mozMatchesSelector ||
Element.prototype.msMatchesSelector ||
Element.prototype.oMatchesSelector ||
Element.prototype.webkitMatchesSelector ||
function(s) {
var matches = (this.document || this.ownerDocument).querySelectorAll(s),
i = matches.length;
while (--i >= 0 && matches.item(i) !== this) {}
return i > -1;
};
}
function findAncestor(el, sel) {
if (typeof el.closest === 'function') {
return el.closest(sel) || null;
}
while (el) {
if (el.matches(sel)) {
return el;
}
el = el.parentElement;
}
return null;
}
answered Mar 18, 2017 at 10:22
marverixmarverix
7,1256 gold badges38 silver badges50 bronze badges
0
@rvighne solution works well, but as identified in the comments ParentElement
and ClassList
both have compatibility issues. To make it more compatible, I have used:
function findAncestor (el, cls) {
while ((el = el.parentNode) && el.className.indexOf(cls) < 0);
return el;
}
parentNode
property instead of theparentElement
propertyindexOf
method on theclassName
property instead of thecontains
method on theclassList
property.
Of course, indexOf is simply looking for the presence of that string, it does not care if it is the whole string or not. So if you had another element with class ‘ancestor-type’ it would still return as having found ‘ancestor’, if this is a problem for you, perhaps you can use regexp to find an exact match.
answered Jun 18, 2017 at 13:02
JoshJosh
3762 silver badges13 bronze badges
This solution should work for IE9 and up.
It’s like jQuery’s parents() method when you need to get a parent container which might be up a few levels from the given element, like finding the containing <form>
of a clicked <button>
. Looks through the parents until the matching selector is found, or until it reaches the <body>
. Returns either the matching element or the <body>
.
function parents(el, selector){
var parent_container = el;
do {
parent_container = parent_container.parentNode;
}
while( !parent_container.matches(selector) && parent_container !== document.body );
return parent_container;
}
answered Sep 23, 2020 at 19:28
JamesJames
3894 silver badges11 bronze badges
Improve Article
Save Article
Like Article
Improve Article
Save Article
Like Article
The task is to find the closest ancestor of the element of specific class with the help of pure Javascript. There are two approaches that are discussed below.
Approach 1: Use the Javascript selector to select the element. Use closest() method to get the closest parent with specific class.
Example: This example implements the above approach.
html
<!DOCTYPE HTML>
<
html
>
<
head
>
<
title
>
Find closest ancestor element that has a
specific class using pure JavaScript
</
title
>
</
head
>
<
body
style
=
"text-align:center;"
>
<
h1
style
=
"color:green;"
>
GeeksforGeeks
</
h1
>
<
p
id
=
"GFG_UP"
>
</
p
>
<
div
name
=
"parentDIV"
class
=
"parent"
>
<
div
class
=
"child"
>
</
div
>
</
div
>
<
button
onclick
=
"myGFG()"
>
click here
</
button
>
<
p
id
=
"GFG_DOWN"
>
</
p
>
<
script
>
var up = document.getElementById("GFG_UP");
up.innerHTML = "Click on button to see result";
var down = document.getElementById("GFG_DOWN");
function myGFG() {
var el = document.querySelector("div")
.closest(".parent")
down.innerHTML = "Element of name '"
+ el.getAttribute("name")
+ "' is the parent element of specific class.";
}
</
script
>
</
body
>
</
html
>
Output:
Approach 2 : Keep moving to the parents of the element until find the specific class. Use the element.className.indexof() method to select the element of particular class.
Example: This example implements the above approach.
html
<!DOCTYPE HTML>
<
html
>
<
head
>
<
title
>
Find closest ancestor element that has a
specific class using pure JavaScript
</
title
>
</
head
>
<
body
style
=
"text-align:center;"
>
<
h1
style
=
"color:green;"
>
GeeksforGeeks
</
h1
>
<
p
id
=
"GFG_UP"
>
</
p
>
<
div
name
=
"parentDIV"
class
=
"parent"
>
<
div
class
=
"child"
>
</
div
>
</
div
>
<
button
onclick
=
"myGFG()"
>
click here
</
button
>
<
p
id
=
"GFG_DOWN"
>
</
p
>
<
script
>
var up = document.getElementById("GFG_UP");
up.innerHTML = "Click on button to see result";
var down = document.getElementById("GFG_DOWN");
function findParent(el, class) {
while ((el = el.parentNode) &&
el.className.indexOf(class) <
0
);
return el;
}
function myGFG() {
var
el
=
document
.querySelector(".child");
var
el
=
findParent
(el, 'parent');
down.innerHTML
=
"Element of name '"
+ el.getAttribute("name")
+ "' is the parent element of specific class.";
}
</script>
</
body
>
</
html
>
Output:
Last Updated :
03 Mar, 2023
Like Article
Save Article
jQuery перемещения
Определение и применение
jQuery метод .closest() для каждого элемента набора совпавших элементов получает первый подходящий элемент, соответствующий заданному селектору, проходя при этом через всех его предков, находящихся выше в дереве DOM.
Обращаю Ваше внимание, что методы .closest() и .parents() схожи в том, что они производят поиск всех предков выше по дереву DOM, но при этом имеют следующие отличия между собой:
.closest() | .parents() |
---|---|
Поиск начинается непосредственно с текущего элемента заданного селектором и движется вверх по дереву DOM. | Поиск начинается с родительского элемента и движется вверх по дереву DOM. |
Перемещается вверх по дереву DOM до тех пор, пока не будет найдено первое соответствие для переданного значения. | Перемещается вверх по дереву DOM к корневому элементу документа, добавляя каждый элемент предка в набор совпавших элементов. Дополнительно может фильтроваться селектором. |
Возвращаемый объект jQuery содержит ноль, или один элемент для каждого элемента в исходном наборе совпавших элементов в порядке следования документа. | Возвращаемый объект jQuery содержит ноль или более элементов для каждого элемента в исходном наборе совпавших элементов в обратном порядке следования документа. |
jQuery синтаксис:
Синтаксис 1.3: // возвращает первый подходящий элемент, соответствующий заданному селектору выше в дереве DOM $( selector ).closest( selector ) selector - Selector Синтаксис 1.6: // возвращает первый подходящий элемент, соответствующий заданному элементу DOM, или объекту jQuery выше в дереве DOM $( selector ).closest( selection ) $( selector ).closest( elements ) selection - Selector elements - Element элемент DOM,
Добавлен в версии jQuery
1.3 (синтаксис обновлен в версии 1.4, 1.6, 1.7 и 1.8)
Значения параметров
Параметр | Описание |
---|---|
selector / selection / element | Строка селектор, элемент DOM, или объект jQuery, использующиеся для поиска необходимых элементов. Выбор элемента (добавление в коллекцию jQuery) осуществляет только в том случае, если элемент, или его предки выше в дереве DOM соответствует переданному селектору, элементу DOM, или объекту jQuery. Обязательный параметр. |
Пример использования
<!DOCTYPE html> <html> <head> <title>Использование методов closest() и parents()</title> <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <script> $( document ).ready(function(){ $( ".closest" ).click(function(){ // вызываем функцию при нажатии на элемент с классом parent $( "*" ).css( "border", "none" ); // с использованием универсального селектора убираем границы у всех элементов $( ".level3" ).closest( "ul" ).css( "border", "1px solid green" ); // устанавливаем ближайшему предку каждого элемента с классом level3 сплошную границу размером 1 пиксель зеленого цвета }) $( ".parents" ).click(function(){ // вызываем функцию при нажатии на элемент с классом parents $( "*" ).css( "border", "none" ); // с использованием универсального селектора убираем границы у всех элементов $( ".level3" ).parents( "ul" ).css( "border", "1px solid green" ); // устанавливаем предкам каждого элемента с классом level3 сплошную границу размером 1 пиксель зеленого цвета }) }); </script> </head> <body> <button class="closest">closest()</button> <button class="parents">parents()</button> <ul> <li>Уровень 1</li> <li>Уровень 1</li> <li>Уровень 1 <ul> <li>Уровень 2</li> <li class ="second">Уровень 2</li> <li>Уровень 2 <ul> <li>Уровень 3</li> <li>Уровень 3</li> <li class ="level3">Уровень 3</li> </ul> </li> </ul> </li> </ul> </body> </html>
В этом примере мы разместили следующие две кнопки (элемент <button>):
- При нажатии на первую мы вызываем функцию, которая с помощью метода .closest() находит ближайшего предка, который является элементом <ul> каждого элемента с классом level3 и устанавливает им (в нашем случае ему) с помощью метода .css() сплошную границу размером 1 пиксель зеленого цвета. Кроме того, при нажатии на любую кнопку с использованием универсального селектора и метода .css() мы убираем границы у всех элементов в документе.
- При нажатии на вторую мы вызываем функцию, которая с помощью метода .parents() выбирает всех предков, которые являются элементом <ul> каждого элемента с классом level3 и с помощью метода .css() устанавливает сплошную границу размером 1 пиксель зеленого цвета.
Результат нашего примера:
В этой статье рассмотрим методы 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>
элементов.