jQuery итерация - метод closest()

Руководство по遍жению jQuery

Пример

Этот пример демонстрирует, как с помощью closest() можно выполнить делегирование событий. При нажатии на ближайший элемент списка или на его подэлементы будет переключен желтый фон:

$( document ).bind("click", function( e ) {
    $( e.target ).closest("li").toggleClass("hilight");
  });

Попробуйте сами

Определение и использование

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

Грамматика

.closest(selector)
Параметр Описание
selector Строковое значение, содержащее селектор элемента, соответствующий условию.

Подробное описание

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

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

Пожалуйста, посмотрите以下的 HTML фрагмент:

<ul id="one" class="level-1">
  <li class="item-i">I</li>
  <li id="ii" class="item-ii">II
  <ul class="level-2">
    <li class="item-a">A</li>
    <li class="item-b">B
      <ul class="level-3">
        <li class="item-1">1</li>
        <li class="item-2">2</li>
        <li class="item-3">3</li>
      </ul>
    </li>
    <li class="item-c">C</li>
  </ul>
  </li>
  <li class="item-iii">III</li>
</ul>

Пример 1

Предположим, что мы выполняем поиск <ul> элементов от элемента A:

$('li.item-a').closest('ul').css('background-color', 'red');

Попробуйте сами

Это изменяет цвет <ul> уровня 2, так как при итерации по дереву DOM сначала встречается этот элемент.

Пример 2

Предположим, что мы ищем элемент <li>:

$('li.item-a').closest('li').css('background-color', 'red');

Попробуйте сами

Это изменяет цвет списка элемента A. Перед тем как начать итерацию по дереву DOM, метод .closest() начинает поиск с самого li элемента и продолжается до тех пор, пока не найдет элемент A.

Пример 3

Мы можем передавать DOM элементы в качестве контекста, в котором мы ищем ближайший элемент.

var listItemII = document.getElementById('ii');
$('li.item-a').closest('ul', listItemII).css('background-color', 'red');
$('li.item-a').closest('#one', listItemII).css('background-color', 'green');

Попробуйте сами

Данный код изменяет цвет <ul> уровня 2, так как он является первым предком ul элемента A и также является потомком элемента II. Он не изменяет цвет <ul> уровня 1, так как не является потомком list item II.

Руководство по遍жению jQuery