Справочник API
.closest() в jQuery
Содержание статьи
-
Категории: Traversing › Tree Traversal
Находит первый элемент, соответствующий указанному селектору (начиная с каждого текущего элемента набора jQuery включительно и далее вверх по дереву).
Синтаксис и описание:
Добавлено в jQuery 1.3.closest( selector )
Добавлено в jQuery 1.4.closest( selector, context )
Добавлено в jQuery 1.6.closest( selection )
Добавлено в jQuery 1.6.closest( element )
Метод .closest() проходит от каждого элемента набора вверх по дереву DOM — начиная с него самого — и возвращает первый найденный элемент, который соответствует селектору. Если ни сам элемент, ни один из его предков не подходят, для этого элемента в результат ничего не попадёт.
Второй параметр, context, ограничивает область поиска: подъём вверх по дереву прекращается, когда доходит до этого DOM-элемента, — ни сам context, ни его предки не проверяются, даже если они подходят под селектор.
С версии 1.6 вместо строкового селектора можно передать готовый набор jQuery (selection) или конкретный DOM-элемент (element) — тогда проверяется, совпадает ли предок именно с ним.
Возвращаемое значение: (объект) Набор jQuery — не более одного элемента на каждый элемент исходного набора.
Параметры:
selector – (строка) селектор, по которому проверяется сам элемент и его предки.
context – (элемент DOM) граница поиска — подъём по дереву останавливается перед этим элементом (добавлено в 1.4).
selection – (объект jQuery) набор, с которым сверяется каждый предок (1.6).
element – (элемент DOM) конкретный элемент, с которым сверяется каждый предок (1.6).
Примечание:
Главное отличие от метода .parents(): .closest() включает в проверку сам исходный элемент и останавливается на первом же совпадении, тогда как .parents() начинает с родителя и собирает вообще все подходящие предки вплоть до document.
Примечание:
Для каждого элемента исходного набора в результат попадает максимум один элемент — если у двух элементов набора общий подходящий предок, дубликаты автоматически убираются.
В jQuery 3.x и 4.0:
Метод не менялся и работает без изменений в jQuery 3.7.1 и 4.0. Нативный аналог —
Element.closest(selector), поддерживается всеми современными браузерами: тоже включает сам элемент и идёт вверх по дереву, но принимает только один аргумент-селектор (без context, без DOM-элемента или jQuery-набора на входе) и работает с одним элементом, а не с коллекцией. Подробнее о том, когда нативный метод достаточен, а когда нужен jQuery — в статье jQuery и обычный JavaScript.
Примеры:
Найти ближайшую карточку по клику на кнопке удаления внутри неё (делегированный обработчик).
$('body').on('click', 'button.remove', function() { $(this).closest('.card').remove(); });Ограничить поиск контекстом — искать
.itemтолько внутри конкретного списка.var list = document.getElementById('list'); $('.icon').closest('.item', list).addClass('active');Нативный аналог для одного элемента, без jQuery.
document.querySelector('button.remove').addEventListener('click', function() { this.closest('.card').remove(); });