jQuery метод .parents()

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

jQuery метод .parents() возвращает всех предков каждого элемента в наборе совпавших элементов, дополнительно может фильтроваться с помощью заданного селектора.

Выбранные методом .parents() элементы упорядочиваются от непосредственного родителя селектора вверх по дереву DOM. Если искомые элементы имеют одного родителя, или предка то в этом случае дубликаты не будут включены в коллекцию jQuery.

jQuery синтаксис:

JavaScript
// выбор всех предков элемента
$( selector ).parents()

// выбор всех предков элемента с определенным селектором
$( selector ).parents( selector )

selector - Selector

Добавлен в версии jQuery

1.0

Значения параметров

Параметр Описание
selector Строка селектор, использующаяся в качестве дополнительного фильтра. Если дополнительно указывается селектор, то выбор элемента (добавление в коллекцию jQuery) осуществляет только в том случае, если он соответствует этому селектору. Необязательный параметр.

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

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

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

index.html
HTML
<button class="parent">parent</button>
<button class="parents">parents</button>
<button class="filter">parent with filter</button>
<button class="filter2">parents with filter</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 () {
    $('.parent').click(function () {
        $('*').css('border', 'none')
        $('.level3').parent().css('border', '1px solid green')
    })

    $('.parents').click(function () {
        $('*').css('border', 'none')
        $('.level3').parents().css('border', '1px solid green')
    })
    $('.filter').click(function () {
        $('*').css('border', 'none')
        $('li').parent('.second').css('border', '1px solid green')
    })
    $('.filter2').click(function () {
        $('*').css('border', 'none')
        $('li').parents('.second').css('border', '1px solid green')
    })
})

В этом примере мы разместили следующие четыре кнопки:

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