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