jQuery метод .closest()

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

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

Обращаю Ваше внимание, что методы .closest() и .parents() схожи в том, что они производят поиск всех предков выше по дереву DOM, но при этом имеют следующие отличия между собой:

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

jQuery синтаксис:

Синтаксис 1.3:

JavaScript
// возвращает первый подходящий элемент, соответствующий заданному селектору выше в дереве DOM
$( selector ).closest( selector )

selector - Selector

Синтаксис 1.6:

JavaScript
// возвращает первый подходящий элемент, соответствующий заданному элементу 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. Обязательный параметр.

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

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

Нажмите ▶, затем выполните действие из пояснения. Измените JavaScript и запустите пример ещё раз. В редакторе используется jQuery 3.1.1.

index.html
HTML
<button class="closest">closest()</button>
<button class="parents">parents()</button>
<ul>
  <li>Уровень 1</li>
  <li>Уровень 1</li>
  <li>
    Уровень 1
    <ul class="second">
      <li>Уровень 2</li>
      <li>Уровень 2</li>
      <li>
        Уровень 2
        <ul>
          <li>Уровень 3</li>
          <li>Уровень 3</li>
          <li class="level3">Уровень 3</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>
main.js
JavaScript
$(document).ready(function () {
    $('.closest').click(function () {
        $('*').css('border', 'none')
        $('.level3').closest('ul').css('border', '1px solid green')
    })

    $('.parents').click(function () {
        $('*').css('border', 'none')
        $('.level3').parents('ul').css('border', '1px solid green')
    })
})

В этом примере мы разместили следующие две кнопки (элемент <button>):

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