jQuery метод .closest()

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() и parents()
Пример использования методов closest() и parents()
jQuery перемещения