jQuery метод .parent()

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

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

jQuery синтаксис:

JavaScript
// выбор родительского элемента
$( selector ).parent()

// выбор родительского элемента с определенным селектором
$( selector ).parent( selector )

selector - Selector

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

1.0

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

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

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

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

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

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 пиксель зеленого цвета.