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

Пример

Найти всех предков каждого элемента b:

$("b").parents()

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

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

parents() получен текущий набор предков каждого элемента в наборе элементов, которые соответствуют текущему выборщику, фильтрация по выборщику является опциональной.

.parents()selector)
Параметр Описание
selector Строковое значение, содержащее выражение селектора для соответствия элементов.

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

Если предоставлен jQuery объект, представляющий набор элементов DOM, метод .parents() позволяет нам искать предков этих элементов в DOM-дереве и создавать новый jQuery объект из соответствующих элементов, расположенных в порядке от ближайшего родителя к более удаленному. Элементы возвращаются в порядке от ближайшего родителя向外. .parents() и .parent() Метод аналогичен, но отличается тем, что он итерирует по одному уровню DOM-дерева.

Этот метод принимает опциональное выражение селектора, аналогичное типу параметра, передаваемого в функцию $(). Если применяется этот селектор, то элементы фильтруются, проверяется, соответствуют ли они селектору.

Размышляйте о странице с базовым вложенным списком:

<ul class="level-1">
  <li class="item-i">I</li>
  <li 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>

Если мы начинаем с элемента A, то можем найти его предков:

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

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

Результат вызова: у элементов level-2 списка, элемента II и элементов level-1 списка и т.д. (вплоть до <html>) устанавливается красный фон. Поскольку мы не применяли выражение селектора, родительские элементы естественно становятся частью объекта. Если был применен селектор, то перед включением элементов проверяется, соответствуют ли они селектору. Поскольку мы не применяли выражение селектора, все предки являются частью возвращаемого jQuery объекта. Если был применен селектор, то включаются только соответствующие элементы.