Поиск ближайшего родителя

Dom7 — это лёгкая и удобная библиотека для работы с DOM, часто используемая в связке с фреймворком Framework7, но полностью функциональная и самостоятельно. Одной из часто используемых операций при манипуляции элементами является поиск ближайшего родителя, соответствующего определённому селектору. Dom7 предоставляет для этого специализированный метод closest().

Метод closest()

Метод closest() используется для поиска ближайшего родительского элемента (ancestor) относительно выбранного элемента, который соответствует заданному CSS-селектору. Этот метод является аналогом стандартного Element.closest() в JavaScript, но поддерживает работу сразу с коллекциями Dom7.

Синтаксис:

$(selector).closest(target)
  • selector — селектор или Dom7-элемент, от которого начинается поиск.
  • target — строка CSS-селектора, определяющая, какой родитель нужно найти.

Метод возвращает новый объект Dom7, содержащий найденные элементы. Если подходящих элементов нет, возвращается пустой объект Dom7.

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

  1. Поиск ближайшего родителя по классу
const item = $('.child-item');
const parent = item.closest('.parent-container');
console.log(parent);

В этом примере для всех элементов с классом .child-item будет найден ближайший родитель с классом .parent-container.

  1. Использование с коллекцией элементов
const items = $('.list-item');
const parentLists = items.closest('.list');
parentLists.each((index, el) => {
    console.log(el);
});

Здесь метод closest() применяется сразу ко всей коллекции .list-item. Для каждого элемента из выборки будет найден его ближайший родитель с классом .list.

  1. Комбинирование с другими методами Dom7
$('.child').closest('.parent').addClass('highlight');

Этот вызов позволяет сразу найти родителя и добавить ему класс .highlight. Метод closest() возвращает объект Dom7, что делает возможной цепочку вызовов.

Отличия от стандартного parent()

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

Пример:

$('.child-item').parent(); // только ближайший прямой родитель
$('.child-item').closest('.parent-container'); // ближайший подходящий ancestor

Использование closest() предпочтительно, когда неизвестна глубина вложенности между элементом и нужным родителем.

Обработка нескольких условий

Метод closest() поддерживает любые селекторы, которые разрешены в CSS, включая классы, идентификаторы, атрибуты и псевдоклассы.

$('.child-item').closest('[data-role="container"]');
$('.child-item').closest('#main-section');
$('.child-item').closest('div.highlighted');

Это позволяет гибко искать родительские элементы по сложным критериям.

Практические советы

  • closest() всегда возвращает объект Dom7, что позволяет продолжать цепочку вызовов, например, применять .find(), .addClass() или .remove().
  • Если элемент уже сам соответствует селектору, closest() вернёт его самого. Это отличие важно учитывать при логике обработки.
  • Метод безопасен для пустых коллекций Dom7 — если элементов нет, код не вызовет ошибок.

Пример комплексного сценария

$('.button').on('click', function () {
    const container = $(this).closest('.card');
    container.toggleClass('active');
    container.find('.card-content').slideToggle();
});

В этом примере при клике на кнопку внутри карточки выполняется поиск ближайшего родителя .card, к которому применяются изменения — добавление класса и показ/скрытие содержимого. Такой подход избавляет от необходимости знать точную структуру DOM заранее и делает код более универсальным.

Метод closest() в Dom7 является ключевым инструментом для работы с вложенными элементами, обеспечивая простой и лаконичный способ взаимодействия с родительскими элементами на любом уровне DOM.

Оглавление