Описание: Возвращает первый предок элемента, соответствующий селектору, начиная с текущего элемента и прогрессируя вверх по дереву DOM
.closest( селектор )
Добавлена в версию: 1.3
селектор
Выражение, с помощью которого отфильтровываются дополнительные элементы.
.closest( селектор, [ контекст ] )
Добавлена в версию: 1.4
селектор
Выражение, с помощью которого отфильтровываются дополнительные элементы.
контекст
Элемент DOM, в котором соответствующий элемент может быть найден. Если контекст не передан, то контекст набора jQuery будет использоваться вместо.
.closest( объект jQuery )
Добавлена в версию: 1.6
объект jQuery
Объект jQuery, соответствующий элементам.
.closest( элемент )
Добавлена в версию: 1.6
элемент
Элемент,соответствующий элементам.
Данный объект 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> элементов, начиная с пункта A:
$('li.item-a').closest('ul')
.css('background-color', 'red');
Это приведет к изменению цвета level-2 <ul>, так как он первый, на который наткнулся метод во время путешествия вверх по дереву DOM.
Предположим мы ищем вместо этого элемент <li>:
$('li.item-a').closest('li')
.css('background-color', 'red');
Это приведет к изменению цвета пункта A. Метод .closest()
начинает поиск с самого элемента до прогрессироавния вверх по дереву DOM,
и останавливается, когда пункт A соответствует селектору.
Мы можем перейти в элемент DOM как контекст, внутри которого необходимо искать ближайший элемент.
Это изменит цвет level-2 <ul>,
потому что он как первый предок <ul> списка пункта A так и
потомок списка пункта II.
Это не изменит цвет level-1 <ul>, так как он не потомок списка пункта II.
Пример
Показывает, как делегирование событий может быть сделано с помощью сlosest.$(document).bind("click", function (e) { $(e.target).closest("li").toggleClass("hilight"); });
Пример - Полный код:
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript" language="javascript"> $(document).ready(function(){ $(document).bind("click", function (e) { $(e.target).closest("li").toggleClass("hilight"); }); }); </script> <style> li { margin: 3px; padding: 3px; background: #EEEEEE; } li.hilight { background: yellow; } </style> </head> <body> <ul> <li><b>Click me!</b></li> <li>You can also <b>Click me!</b></li> </ul> </body> </html>
Пример 2
Показывает как событие делегации может быть произведено с closest. Ближайший элемент списка переключает желтый фон, когда он или его ближайший потомок нажаты.<!DOCTYPE html>
<html>
<head>
<style>
li { margin: 3px; padding: 3px; background: #EEEEEE; }
li.hilight { background: yellow; }
</style>
<script src="http://code.jquery.com/jquery-latest.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 ).bind("click", function( e ) {
$( e.target ).closest( $listElements ).toggleClass("hilight");
});
</script>
</body>
</html>Описание: Возвращает массив всех элементов и селекторы, сравнивая с текущим элементом вверх по дереву DOM.
.closest( селектор, [ контекст ] )
Добавлена в версию: 1.4
селектор
Выражение, с помощью которого отфильтровываются дополнительные элементы.
контекст
Элемент DOM, в котором соответствующий элемент может быть найден. Если контекст не передан, то контекст набора jQuery будет использоваться вместо.
Этот метод в основном предназначен для внутреннего использования или плагином авторов.
Пример
Показывается, как событие делегации может быть сделано с closest.Пример - Полный код:
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript" language="javascript"> $(document).ready(function(){ var close = $("li:first").closest(["ul", "body"]); $.each(close, function(i){ $("li").eq(i).html( this.selector + ": " + this.elem.nodeName ); }); }); </script> </head> <body> <ul><li></li><li></li></ul> </body> </html>
Была ли эта информация полезной?
