jQuery метод .parentsUntil()

jQuery перемещения

Определение и применение

jQuery метод .parentsUntil() возвращает всех предков каждого элемента в наборе совпавших элементов, вплоть до, но не включая элемента соответствующего определенному селектору, узлу DOM, или jQuery объекту.


Обращаю Ваше внимание, что если селектор не сопоставлен или не указан, то будут выбраны все предки, это равнозначно вызову метода .parents() без аргументов.


Выбранные методом .parentsUntil() элементы упорядочиваются от непосредственного родителя селектора вверх по дереву DOM. Если искомые элементы имеют одного родителя, или предка то в этом случае дубликаты не будут включены в коллекцию jQuery.

jQuery синтаксис:

Синтаксис 1.4:
// выбор всех предков
$( selector ).parentsUntil()

// выбор всех предков с определенным селектором (при необходимости с доп. фильтром)
$( selector ).parentsUntil( selector )
$( selector ).parentsUntil( selector, filter )

Синтаксис 1.6:
// выбор всех предков соответствующих определенном элементу DOM или объекту jQuery (при необходимости с доп. фильтром)
$( selector ).parentsUntil( element )
$( selector ).parentsUntil( element, filter )

selector - Selector // необязательный параметр
filter - Selector // необязательный параметр
element - Element DOM или объект jQuery // необязательный параметр

Добавлен в версии jQuery

1.4 (синтаксис расширен в 1.6)

Значения параметров

ПараметрОписание
selector / elementСтрока, содержащая выражение селектора, узел DOM или объект jQuery, которые указывают, где прекратить сопоставление предков. Необязательный параметр.
filterСтрока селектор, использующаяся в качестве дополнительного фильтра. Если дополнительно указывается селектор, то выбор элемента (добавление в коллекцию jQuery) осуществляет только в том случае, если он соответствует этому селектору. Необязательный параметр.

Пример использования

<!DOCTYPE html>
<html>
	<head>
		<title>Использование метода parentsUntil()</title>
		<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
		<script>
	$( document ).ready(function(){
	  $( ".until" ).click(function(){ // вызываем функцию при нажатии на элемент с классом until
	    $( "*" ).css( "border", "none" ); // с использованием универсального селектора убираем границы у всех элементов
	    $( ".level3" ).parentsUntil().css( "border", "1px solid green" ); // устанавливаем предкам каждого элемента с классом level3 сплошную границу размером 1 пиксель зеленого цвета
	  })
	  $( ".until2" ).click(function(){ // вызываем функцию при нажатии на элемент с классом until2
	    $( "*" ).css( "border", "none" ); // с использованием универсального селектора убираем границы у всех элементов
	    $( ".level3" ).parentsUntil( ".second" ).css( "border", "1px solid green" ); // устанавливаем всем предкам каждого элемента с классом level3 до предка с классом .second сплошную границу размером 1 пиксель зеленого цвета
	  })
	  $( ".until3" ).click(function(){ // вызываем функцию при нажатии на элемент с классом until3
	    $( "*" ).css( "border", "none" ); // с использованием универсального селектора убираем границы у всех элементов
	    $( "level3" ).parentsUntil( ".second", "ul" ).css( "border", "1px solid green" );  // устанавливаем всем предкам каждого элемента с классом level3 до предка с классом .second сплошную границу размером 1 пиксель зеленого цвета, в том случае если предок является элементом <ul>
	  })
	  $( ".until4" ).click(function(){ // вызываем функцию при нажатии на элемент с классом until4
	    $( "*" ).css( "border", "none" ); // с использованием универсального селектора убираем границы у всех элементов
	    $( "level3" ).parentsUntil( ".second", "li" ).css( "border", "1px solid green" ); // устанавливаем всем предкам каждого элемента с классом level3 до предка с классом .second сплошную границу размером 1 пиксель зеленого цвета, в том случае если предок является элементом <li>
	  })
	});
		</script>
	</head>
	<body>
		<button class="until">parentsUntil()</button>
		<button class="until2">parentsUntil(".second")</button>
		<button class="until3">parentsUntil(".second", "ul")</button>
		<button class="until4">parentsUntil(".second", "li")</button>
		<ul>
			<li>Уровень 1</li>
			<li>Уровень 1</li>
			<li>Уровень 1
				<ul class = "second">
					<li>Уровень 2</li>
					<li>Уровень 2</li>
					<li>Уровень 2
						<ul>
							<li>Уровень 3</li>
							<li>Уровень 3</li>
							<li class = "level3">Уровень 3</li>
						</ul>
					</li>
				</ul>
			</li>
		</ul>
	</body>
</html>

В этом примере мы разместили следующие четыре кнопки:


Результат нашего примера:

Пример использования метода parentsUntil()
Пример использования метода parentsUntil()
jQuery перемещения