Jquery как найти ближайший элемент

.closest( selector )Returns: jQuery

Description: For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.

version added: 1.3.closest( selector )
- selector
  
  A string containing a selector expression to match elements against.
version added: 1.4.closest( selector [, context ] )
- selector
  
  A string containing a selector expression to match elements against.
- context
  
  A DOM element within which a matching element may be found.
version added: 1.6.closest( selection )
- selection
  
  A jQuery object to match elements against.
version added: 1.6.closest( element )
- element
  
  An element to match elements against.

Given a jQuery object that represents a set of DOM elements, the .closest() method searches through these elements and their ancestors in the DOM tree and constructs a new jQuery object from the matching elements. The .parents() and .closest() methods are similar in that they both traverse up the DOM tree. The differences between the two, though subtle, are significant:

`.closest()`	`.parents()`
Begins with the current element	Begins with the parent element
Travels up the DOM tree until it finds a match for the supplied selector	Travels up the DOM tree to the document’s root element, adding each ancestor element to a temporary collection; it then filters that collection based on a selector if one is supplied
The returned jQuery object contains zero or one element for each element in the original set, in document order	The returned jQuery object contains zero or more elements for each element in the original set, in reverse document order

<ul id="one" class="level-1">



  


                       
  



  <li class="item-i">I</li>
  <li id="ii" class="item-ii">II
      <li class="item-a">A</li>
          <li class="item-1">1</li>
          <li class="item-2">2</li>
          <li class="item-3">3</li>
      <li class="item-c">C</li>



  


                       
  



  <li class="item-iii">III</li>

Suppose we perform a search for <ul> elements starting at item A:

  .css( "background-color", "red" );

This will change the color of the level-2 <ul>, since it is the first encountered when traveling up the DOM tree.

Suppose we search for an <li> element instead:

  .css( "background-color", "red" );

This will change the color of list item A. The .closest() method begins its search with the element itself before progressing up the DOM tree, and stops when item A matches the selector.

We can pass in a DOM element as the context within which to search for the closest element.

var listItemII = document.getElementById( "ii" );
  .closest( "ul", listItemII )
  .css( "background-color", "red" );
  .closest( "#one", listItemII )
  .css( "background-color", "green" );

This will change the color of the level-2 <ul>, because it is both the first <ul> ancestor of list item A and a descendant of list item II. It will not change the color of the level-1 <ul>, however, because it is not a descendant of list item II.

Examples:

Show how event delegation can be done with closest. The closest list element toggles a yellow background when it or its descendent is clicked.

  <title>closest demo</title>
  <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
  <li><b>Click me!</b></li>



  


                       
  



  <li>You can also <b>Click me!</b></li>
$( document ).on( "click", function( event ) {
  $( event.target ).closest( "li" ).toggleClass( "highlight" );

Demo:

Pass a jQuery object to closest. The closest list element toggles a yellow background when it or its descendent is clicked.

  <title>closest demo</title>
  <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
  <li><b>Click me!</b></li>
  <li>You can also <b>Click me!</b></li>
var listElements = $( "li" ).css( "color", "blue" );



  


                       
  



$( document ).on( "click", function( event ) {
  $( event.target ).closest( listElements ).toggleClass( "highlight" );

Demo:

.closest( selectors [, context ] )Returns: Arrayversion deprecated: 1.7, removed: 1.8

Description: Get an array of all the elements and selectors matched against the current element up through the DOM tree.

version added: 1.4.closest( selectors [, context ] )
- selectors
  
  An array or string containing a selector expression to match elements against (can also be a jQuery object).
- context
  
  A DOM element within which a matching element may be found.

This signature (only!) is deprecated as of jQuery 1.7 and removed in jQuery 1.8. It was primarily meant to be used internally or by plugin authors.

Источник

В этой статье рассмотрим методы jQuery для поиска в DOM-дереве необходимых элементов, связанных с элементами текущего набора определёнными отношениями.

find() – выбор потомков

Нахождение потомков для каждого элемента текущего набора в jQuery выполняется с помощью find().

Указать искомые элементы можно посредством селектора, ссылки на DOM-элементы или набора jQuery. В качестве результата этот метод возвращает новый объект jQuery, состоящий из найденных элементов.

Например, выбрать все элементы с классом «carousel-items», расположенные в «.carousel»:

<div class="carousel">
  <div class="carousel-items">
    <div class="carousel-item">...</div>
    <div class="carousel-item">...</div>
    <div class="carousel-item">...</div>
  <div class="carousel-items">
</div>

<script>
var carousel = $('.carousel');
// выберем потомков с классом carousel-item для элементов набора carousel
var items = carousel.find('.carousel-item');

// пример указания элементов в find посредством ссылки на DOM-элементы
// var elements = document.querySelectorAll('.carousel-item');
// var items = carousel.find(elements);

// с помощью набора jQuery
// var elements = $('.item');
// var items = carousel.find(elements);
</script>

children() – выбор дочерних элементов

Кроме find() в jQuery имеется ещё один похожий метод: children().

children() в отличие от find() выполняет поиск элементов только среди детей каждого элемента текущего набора (т.е. не опускается ниже одного уровня по DOM-дереву).

Для выбора всех дочерних элементов для каждого элемента текущего набора children() необходимо вызвать без аргументов:

<div class="message">
  <h3>...</h3>
  <p>...</p>
</div>
<div class="message">
  <h3>...</h3>
  <p>...</p>
</div>

<script>
  const elements = $('.message').children();
</script>

Если необходимо выбрать не все, а только определённые, то можно использовать селектор.

Например, выберем не все элементы, а только <h3>:

const elements = $('.message').children('h3');

closest() – выбор ближайшего предка

В jQuery поиск ближайшего предка (включая сам этот элемент) выполняется с помощью метода closest().

Если более точно, то closest() выбирает для каждого элемента текущего набора первый элемент, соответствующий указанному (поиск начинается с самого элемента, а потом вверх по предкам).

Для указания искомый элементов можно использовать селектор, ссылку на DOM-элементы и набор jQuery.

Например, выбрать <ul> в качестве ближайшего предка для элементов текущего набора:

<ul>
  <li>One</li>
  <li class="active">Two</li>
  <li>Three</li>
</ul>

<script>
  // текущий набор
  var elements = $('li.active');
  // выберем ближайших предков по селектору ul для элементов, содержащихся в наборе elements
  var ul = elements.closest('ul');
</script>

next() – выбор следующего элемента

В jQuery получить для каждого элемента набора следующий элемент (при необходимости соответствующий указанному селектору) можно с помощью метода next().

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

Например, выберем <li> расположенный после «.active»:

<ul>
  <li>One</li>
  <li class="active">Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ul>

<script>
  const element = $('li.active').next('li');
</script>

Если необходимо выбрать не конкретный элемент, а просто следующий, то в этом случае вызывать next() необходимо без аргументов:

const element = $('li.active').next();

Когда необходимо получить не один, а все следующие элементы для каждого элемента набора, следует использовать nextAll().

Например:

const elements = $('li.active').nextAll();

Кроме next() и nextAll() в jQuery имеется ещё nextUntil(). Он позволяет получить все следующие элементы до указанного.

Например, выберем все <li> кроме последнего, расположенные после «.active»:

const elements = $('li.active').nextUntil('li','li:last-child');

prev() – выбор предыдущего элемента

В jQuery кроме методов для выбора следующих элементов имеются аналогичные для получения предыдущих: prev(), prevAll() и prevUntil().

Например:

<div class="boxes">
  <div></div>
  <div></div>
  <div></div>
  <div class="current"></div>
  <div></div>
</div>

<script>
  var prev = $('.current').prev();
</script>

siblings() – выбор сиблингов

Получение сиблингов для каждого элемента набора в jQuery осуществляется с помощью метода siblings().

При этом, если нужно выбрать не все, а только определённые сиблинги, то можно указать соответствующий селектор. В качестве результата siblings() возвращает новый набор jQuery, состоящий из найденных элементов.

<ul>
  <li>One</li>
  <li class="active">Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ul>

<script>
  var elements = $('li.active').siblings();
</script>

parent() – получение родителя

В jQuery получение родительского элемента для каждого элемента текущего набора осуществляется с помощью parent().

При необходимости в parent() мы можем передать селектор и тем самым указать, что нам нужны только элементы соответствующие ему.

Например, получим родительский элемент для <li> с классом active:

<ul>
  <li>One</li>
  <li class="active">Two</li>
  <li>Three</li>
</ul>

<script>
  const elements = $('li.active').parent();
</script>

В jQuery кроме parent() имеется ещё метод parents(). Он в отличие от первого получает для элементов набора не только их непосредственных родителей, а вообще всех предков (до <html>).

Например, получим всех предков для <li> с классом active:

<body>
  <ul>
    <li>One</li>
    <li class="active">Two</li>
    <li>Three</li>
  </ul>
  ...

<script>
  const elements = $('li.active').parents(); // <ul>, <body>, <html>
</script>

При необходимости можно выбрать не всех предков, а только тех, которые соответствует указанному селектору.

Например, получим предков, соответствующего селектору .one для элемента с классом three:

<div class="one">
  <div class="two">
    <div class="three">...</div>
  </div>
</div>

<script>
  var elements = $('.three').parents('.one');
</script>

Ограничить подъём по дереву DOM при получении предков можно посредством parentsUntil():

Например, получим предков являющимися <div> для элемента с классом active (при этом поиск предков должен ограничиваться элементом соответствующим селектору .container:

<div class="container">
  <div class="one">
    <div class="two">
      <div class="active">...</div>
    </div>
  </div>
</div>

<script>
  var elements = $('.three').parentsUntil('div', '.container');
</script>

offsetParent() – получение ближайшего позиционированного предка

В jQuery для получения ближайшего позиционированного предка можно воспользоваться offsetParent(). Этот метод не принимает никаких аргументов.

Этот метод может использоваться в операциях расчета смещений для выполнения анимации и размещения объектов на странице.

Например, найдём offsetParent для элемента с классом active:

<div class="container">
  <div class="one" style="position: relative;">
    <div class="two">
      <div class="active">...</div>
    </div>
  </div>
</div>

<script>
  var elements = $('.active').offsetParent();
</script>

contents() – выбрать все дочерние узлы

В jQuery метод children() используется, когда нужно получить все дочерние узлы (элементы, текстовые узлы и комментарии) для каждого элемента текущего набора.

Этот метод не принимает никаких аргументов.

.contents() и .children() аналогичны, за исключением того, что первый включает в себя текстовые узлы и комментарии.

Метод .contents() можно также использовать для получения содержимого iframe, если iframe находится в том же домене, что и главная страница.

Начиная с jQuery 3.2, .contents() также возвращает содержимое <template> элементов.

Источник

I have the following HTML code:

<td>
  <input type="text" size="40" value="" name="related_image" id="related_image">  
  <input type="button" class="button addImage" value="Get image url">
</td>
<td>
  <input type="text" size="40" value="" name="alternative_image" id="alternative_image">  
  <input type="button" class="button addImage" value="Get image url">
</td>

I need to figure out which button I click, then add some text to the nearest input text field.
E.g. if I click the button in the first <td>, then I need to input some text into related_image text field.

I’ve tried with the followin jQuery, but it’s not working:

jQuery('.addImage').click(function() {
  var tmp = jQuery(this).closest("input[type=text]").attr('name');
  alert(tmp);
});

(I’m just retrieving the inputs name for testing.)

I think I might have to use find and / or siblings. But I’m not quite sure how.

Any help appreciated.

EDIT

I just managed to use this code
addImageEvent = jQuery(this).prevAll("input[type=text]:first")

Is using prevAll a bad choice?

Источник

Содержание:

.closest( selector )
- .closest( selector )
- .closest( selector [, context ] )
- .closest( selection )
- .closest( element )
.closest( selectors [, context ] )
- .closest( selectors [, context ] )
Обсуждение
Примеры

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

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

Добавлен в версии 1.3.closest( selector )
- selector
  
  Строка содержащая выражение селектора для проверки совпадения элементов.
Добавлен в версии 1.4.closest( selector [, context ] )
- selector
  
  Строка содержащая выражение селектора для проверки совпадения элементов.
- context
  
  DOM элемент в рамках которого соответствующий элемент может быть найден.
Добавлен в версии 1.6.closest( selection )
- selection
  
  Объект jQuery для проверки совпадения элементов.
Добавлен в версии 1.6.closest( element )
- element
  
  Элемент для проверки совпадения элементов.

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

`.closest()`	`.parents()`
Начинает обход с текущего элемента	Начинает обход с родительского элемента
Делает обход вверх по DOM дереву, до тех пор пок не найдет совпадения для заданного селектора	Делает обход вверх по DOM дереву, до самого верхнего элемента документа, добавляя каждый найденный элемент во временную коллекцию; затем результат фильтруется при помощи селектора если он указан
Результат выполнения – объект jQuery, содержащий ноль или один элемент для каждого элемента в изначальном наборе элементов object, в прямом порядке документа	Результат выполнения – объект jQuery, содержащий ноль или больше элементов для каждого элемента в изначальном наборе элементов, в обратном порядке документа

<ul id="one" class="level-1">
  <li class="item-i">I</li>
  <li id="ii" class="item-ii">II
      <li class="item-a">A</li>
          <li class="item-1">1</li>
          <li class="item-2">2</li>
          <li class="item-3">3</li>
      <li class="item-c">C</li>
  <li class="item-iii">III</li>

Предположим мы проводим поиск элементов <ul> начиная с элемента A:

  .css( "background-color", "red" );

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

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

  .css( "background-color", "red" );

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

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

var listItemII = document.getElementById( "ii" );
  .closest( "ul", listItemII )
  .css( "background-color", "red" );
  .closest( "#one", listItemII )
  .css( "background-color", "green" );

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

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

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

Добавлен в версии 1.4.closest( selectors [, context ] )
- selectors
  
  Массив или строк содержащая выражение селектора для проверки соответствия элемента (также может быть jQuery объектом).
- context
  
  Элемент DOM, внутри которого может быть найден соответствующий элемент.

Эта сигнатура (только эта!) помечено как устаревшее в jQuery 1.7 и удалено в jQuery 1.8. Этот метод в первую очередь предназначен для внутренного использования или для авторов плагином.

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

Источник

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. Обязательный параметр.

Параметр

Описание

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() находит ближайшего предка, который является элементом <ul> каждого элемента с классом level3 и устанавливает им (в нашем случае ему) с помощью метода .css() сплошную границу размером 1 пиксель зеленого цвета. Кроме того, при нажатии на любую кнопку с использованием универсального селектора и метода .css() мы убираем границы у всех элементов в документе.
При нажатии на вторую мы вызываем функцию, которая с помощью метода .parents() выбирает всех предков, которые являются элементом <ul> каждого элемента с классом level3 и с помощью метода .css() устанавливает сплошную границу размером 1 пиксель зеленого цвета.

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

Пример использования методов closest() и parents()

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

Источник

Contents:

.closest( selector )Returns: jQuery

version added: 1.3.closest( selector )

version added: 1.4.closest( selector [, context ] )

version added: 1.6.closest( selection )

version added: 1.6.closest( element )

Examples:

Demo:

Demo:

.closest( selectors [, context ] )Returns: Arrayversion deprecated: 1.7, removed: 1.8

version added: 1.4.closest( selectors [, context ] )

find() – выбор потомков

children() – выбор дочерних элементов

closest() – выбор ближайшего предка

next() – выбор следующего элемента

prev() – выбор предыдущего элемента

siblings() – выбор сиблингов

parent() – получение родителя

offsetParent() – получение ближайшего позиционированного предка

contents() – выбрать все дочерние узлы

Содержание:

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

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

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

Добавлен в версии 1.6.closest( selection )

Добавлен в версии 1.6.closest( element )

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

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

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

jQuery синтаксис:

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

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

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

Добавить комментарий Отменить ответ

Contents:

.closest( selector )Returns: jQuery

version added: 1.3.closest( selector )

version added: 1.4.closest( selector [, context ] )

version added: 1.6.closest( selection )

version added: 1.6.closest( element )

Demo:

Demo:

.closest( selectors [, context ] )Returns: Arrayversion deprecated: 1.7, removed: 1.8

version added: 1.4.closest( selectors [, context ] )

find() – выбор потомков

children() – выбор дочерних элементов

closest() – выбор ближайшего предка

next() – выбор следующего элемента

prev() – выбор предыдущего элемента

siblings() – выбор сиблингов

parent() – получение родителя

offsetParent() – получение ближайшего позиционированного предка

contents() – выбрать все дочерние узлы

Содержание:

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

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

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

Добавлен в версии 1.6.closest( selection )

Добавлен в версии 1.6.closest( element )

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

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

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

jQuery синтаксис:

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

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

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

Вам также может понравиться

Как найти удаленные письма в аутлуке

Как составить режим дня для старшеклассников

Как составить ходатайство в суд административные правонарушения

Добавить комментарий Отменить ответ