Метод closest в JavaScript: удобный способ нахождения ближайшего элемента

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

Здесь приведем простой пример использования метода closest(). Предположим, у нас есть HTML-код, содержащий список элементов div и к каждому из них привязан некоторый обработчик событий click:

  Кнопка 1


  
Название 1
  
Описание 1


  Кнопка 2


  
Название 2
  
Описание 2

Каждый раз, когда происходит событие click на кнопке, мы ищем ближайший родительский элемент типа div и добавляем ему класс "active". Таким образом, будет активирован только тот элемент, на котором была нажата кнопка.

Кроме того, можно использовать дополнительные селекторы в методе closest(). Например, можно искать ближайший элемент с классом "container":

const container = button.closest('.container');

Также можно использовать более сложные селекторы, включающие в себя комбинации классов, атрибутов и псевдоэлементов. Например, можно найти ближайший элемент типа li с классом "active":

const item = button.closest('li.active');

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