jQuery метод .parentsUntil()

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

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

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

jQuery синтаксис:

Синтаксис 1.4:

JavaScript
// выбор всех предков
$( selector ).parentsUntil()

// выбор всех предков с определенным селектором (при необходимости с доп. фильтром)
$( selector ).parentsUntil( selector )
$( selector ).parentsUntil( selector, filter )

Синтаксис 1.6:

JavaScript
// выбор всех предков соответствующих определенном элементу DOM или объекту jQuery (при необходимости с доп. фильтром)
$( selector ).parentsUntil( element )
$( selector ).parentsUntil( element, filter )

selector - Selector // необязательный параметр

filter - Selector // необязательный параметр

element - Element DOM или объект jQuery // необязательный параметр

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

1.4 (синтаксис расширен в 1.6)

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

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

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

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

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

index.html
HTML
<button class="until">parentsUntil()</button>
<button class="until2">parentsUntil(".second")</button>
<button class="until3">parentsUntil(".second", "ul")</button>
<button class="until4">parentsUntil(".second", "li")</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 () {
    $('.until').click(function () {
        $('*').css('border', 'none')
        $('.level3').parentsUntil().css('border', '1px solid green')
    })

    $('.until2').click(function () {
        $('*').css('border', 'none')
        $('.level3').parentsUntil('.second').css('border', '1px solid green')
    })
    $('.until3').click(function () {
        $('*').css('border', 'none')
        $('.level3').parentsUntil('.second', 'ul').css('border', '1px solid green')
    })
    $('.until4').click(function () {
        $('*').css('border', 'none')
        $('.level3').parentsUntil('.second', 'li').css('border', '1px solid green')
    })
})

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

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