.closest()


.closest( selector )Возвращает: jQuery

Описание: Для каждого элемента в наборе, получает первый элемент, который совпадает с селектором при движении вверху по DOM дереву элементов.

  • Добавлен в версии 1.3.closest( selector )

    • selector
      Тип: Selector
      Строка содержащая выражение селектора для проверки совпадения элементов.
  • Добавлен в версии 1.4.closest( selector [, context ] )

    • selector
      Тип: Selector
      Строка содержащая выражение селектора для проверки совпадения элементов.
    • context
      Тип: Element
      DOM элемент в рамках которого соответствующий элемент может быть найден.
  • Добавлен в версии 1.6.closest( selection )

    • selection
      Тип: jQuery
      Объект jQuery для проверки совпадения элементов.
  • Добавлен в версии 1.6.closest( element )

    • element
      Тип: Element
      Элемент для проверки совпадения элементов.

Учитывая, что объект jQuery представляет из себя набор DOM элементов, метод .closest() находит потомков и создает новый jQuery объект из найденных элементов. Методы .parents() и .closest() аналогичны, тем что делают обход элементов вверху по DOM дереву. Различия между ними весьма тонкие, но имеют важное значение:

.closest() .parents()
Начинает обход с текущего элемента Начинает обход с родительского элемента
Делает обход вверх по DOM дереву, до тех пор пок не найдет совпадения для заданного селектора Делает обход вверх по DOM дереву, до самого верхнего элемента документа, добавляя каждый найденный элемент во временную коллекцию; затем результат фильтруется при помощи селектора если он указан
Результат выполнения - объект jQuery, содержащий ноль или один элемент для каждого элемента в изначальном наборе элементов object, в прямом порядке документа Результат выполнения - объект jQuery, содержащий ноль или больше элементов для каждого элемента в изначальном наборе элементов, в обратном порядке документа
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<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:

1
2
3
$( "li.item-a" )
.closest( "ul" )
.css( "background-color", "red" );

Это изменит цвет элемента <ul> с классом level-2, так как он первым столкнется при движении вверх по DOM дереву.

Предположим мы ищем элемент <li>:

1
2
3
$( "li.item-a" )
.closest( "li" )
.css( "background-color", "red" );

Это изменит цвет элемента списка A. Метод .closest() наинает поиск с элемента для которого вызван перед процессом движения вверх по DOM дереву и останавливается когда элемент списка A соответствует селектору.

Мы можем передать DOM элемент как контекст при помощи которого будет искаться ближайший элемент.

1
2
3
4
5
6
7
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" );

Это изменит цвет элемента <ul> с классом level-2, потому как первый <ul> предок элемента списка и потомок элемента списка II. Это не изменит цвет элемента <ul> с классом level-1, поскольку он не является потомком элемента списка II.

Примеры:

Пример показывает как элемент - цель события может использовано вместе с closest. Ближайший элемент списка (ul) станет желтым (или наоборот), когда Вы нажмете на элемент li.

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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>closest demo</title>
<style>
li {
margin: 3px;
padding: 3px;
background: #EEEEEE;
}
li.hilight {
background: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<ul>
<li><b>Нажми на меня!</b></li>
<li>Вы также можете <b>Нажать на меня!</b></li>
</ul>
<script>
$( document ).on( "click", function( event ) {
$( event.target ).closest( "li" ).toggleClass( "hilight" );
});
</script>
</body>
</html>

Демонстрация:

Передает объект jQuery в метод closest. Ближайший элемент списка переключает желтый фон когда по его потомку кликают.

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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>closest demo</title>
<style>
li {
margin: 3px;
padding: 3px;
background: #EEEEEE;
}
li.hilight {
background: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<ul>
<li><b>Нажми на меня!</b></li>
<li>Вы также можете <b>Нажать на меня!</b></li>
</ul>
<script>
var listElements = $( "li" ).css( "color", "blue" );
$( document ).on( "click", function( event ) {
$( event.target ).closest( listElements ).toggleClass( "hilight" );
});
</script>
</body>
</html>

Демонстрация:

.closest( selectors [, context ] )Возвращает: ArrayУстарел в версии: 1.7, Удален в версии: 1.8

Описание: Для каждого элемента в наборе, получает первый элемент, который совпадает с селектором при движении вверху по DOM дереву элементов.

  • Добавлен в версии 1.4.closest( selectors [, context ] )

    • selectors
      Тип: Array
      Массив или строк содержащая выражение селектора для проверки соответствия элемента (также может быть jQuery объектом).
    • context
      Тип: Element
      Элемент DOM, внутри которого может быть найден соответствующий элемент.
Эта сигнатура (только эта!) помечено как устаревшее в jQuery 1.7 и удалено в jQuery 1.8. Этот метод в первую очередь предназначен для внутренного использования или для авторов плагином.