Содержание:
.closest( selector )Возвращает: jQuery
Описание: Для каждого элемента в наборе получить первый элемент, соответствующий селектору, проверив сам элемент и перемещаясь вверх по его предкам в дереве DOM.
-
версия добавлена: 1.3.closest( selector )
- selectorТип: СелекторСтрока, содержащая выражение селектора для сопоставления элементов.
-
-
версия добавлена: 1.4.closest( selector [, context ] )
-
версия добавлена: 1.6.closest( selection )
- selectionТип: jQueryОбъект jQuery для сопоставления элементов.
-
-
версия добавлена: 1.6.closest( element )
- elementТип: ЭлементЭлемент для сопоставления элементов.
-
Учитывая объект jQuery, представляющий набор элементов DOM, метод .closest() просматривает эти элементы и их предков в дереве DOM и создает новый объект jQuery из соответствующих элементов. Методы .parents() и .closest() аналогичны тем, что оба перемещаются вверх по дереву DOM. Однако различия, хотя и тонкие, значительны:
.closest() | .parents() |
|---|---|
| Начинается с текущего элемента | Начинается с родительского элемента |
| Перемещается вверх по дереву DOM, пока не найдет соответствие заданному селектору | Перемещается вверх по дереву DOM до корневого элемента документа, добавляя каждый родительский элемент во временную коллекцию; затем фильтрует эту коллекцию на основе селектора, если он задан |
| Возвращаемый объект jQuery содержит ноль или один элемент для каждого элемента исходного набора, в порядке документа | Возвращаемый объект jQuery содержит ноль или более элементов для каждого элемента исходного набора, в обратном порядке документа |
<ul id="one" class="level-1">
<li class="item-i">I</li>
<li id="ii" class="item-ii">II
<ul class="level-2">
<li class="item-a">A</li>
<li class="item-b">B
<ul class="level-3">
<li class="item-1">1</li>
<li class="item-2">2</li>
<li class="item-3">3</li>
</ul>
</li>
<li class="item-c">C</li>
</ul>
</li>
<li class="item-iii">III</li>
</ul> Предположим, мы выполнили поиск по <ul> элементам, начиная с элемента А:
$( "li.item-a" ) .closest( "ul" ) .css( "background-color", "red" );
Это изменит цвет уровня-2 <ul>, так как он первый встреченный при движении вверх по дереву DOM.
Предположим, мы ищем элемент <li> вместо него:
$( "li.item-a" ) .closest( "li" ) .css( "background-color", "red" );
Это изменит цвет пункта списка А. Метод .closest() начинает поиск с самого элемента перед продвижением вверх по дереву DOM и останавливается, когда элемент А соответствует селектору.
Мы можем передать элемент DOM в качестве контекста, в пределах которого следует искать ближайший элемент.
var listItemII = document.getElementById( "ii" ); $( "li.item-a" ) .closest( "ul", listItemII ) .css( "background-color", "red" ); $( "li.item-a" ) .closest( "#one", listItemII ) .css( "background-color", "green" );
Это изменит цвет уровня-2 <ul>, так как это ближайший <ul> предок элемента А и потомок элемента II. Однако он не изменит цвет уровня-1 <ul>, поскольку он не является потомком элемента II.
Примеры:
Показать, как можно выполнить делегирование событий с помощью closest. Ближайший элемент списка переключает желтый фон при щелчке по нему или его потомку.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>closest demo</title>
<style>
li {
margin: 3px;
padding: 3px;
background: #EEEEEE;
}
li.highlight {
background: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
<ul>
<li><b>Click me!</b></li>
<li>You can also <b>Click me!</b></li>
</ul>
<script>
$( document ).on( "click", function( event ) {
$( event.target ).closest( "li" ).toggleClass( "highlight" );
});
</script>
</body>
</html> Демо:
Передайте объект jQuery в closest. Ближайший элемент списка переключает желтый фон при щелчке по нему или его потомку.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>closest demo</title>
<style>
li {
margin: 3px;
padding: 3px;
background: #EEEEEE;
}
li.highlight {
background: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
<ul>
<li><b>Click me!</b></li>
<li>You can also <b>Click me!</b></li>
</ul>
<script>
var listElements = $( "li" ).css( "color", "blue" );
$( document ).on( "click", function( event ) {
$( event.target ).closest( listElements ).toggleClass( "highlight" );
});
</script>
</body>
</html> Демо:
.closest( selectors [, context ] )Возвращает: Массивверсия устарела: 1.7, удалена: 1.8
Описание: Получить массив всех элементов и селекторов, сопоставленных с текущим элементом до дерева DOM.
-
версия добавлена: 1.4.closest( selectors [, context ] )
