jQuery метод .addBack()

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

jQuery метод .addBack() позволяет добавить предыдущий набор элементов в стеке к текущему набору, при необходимости дополнительно отфильтрованный селектором.

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

jQuery синтаксис:

Синтаксис 1.8:

$( selector ).addBack()
$( selector ).addBack( selector )

selector - Selector

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

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

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

Метод .addBack() — пример 1

Нажмите ▶. Измените JavaScript и запустите пример повторно. Используется jQuery 4.0.0.

index.html

HTML

<ul>
  <li>Элемент 1</li>
  <li class="second">Элемент 2</li>
  <li>Элемент 3</li>
  <li>Элемент 4</li>
</ul>
<ul>
  <li class="first active">Элемент 1</li>
  <li>Элемент 2</li>
  <li>Элемент 3</li>
  <li>Элемент 4</li>
  <li class="active">Элемент 5</li>
  <li>Элемент 6</li>
</ul>

main.js

JavaScript

$(document).ready(function () {
    $('.second')
        .nextAll() // получаем все элементы, которые являются следующими сестринскими элементами по отношению к текущему элементу
        .css('color', 'green') // устанавливаем цвет текста зеленый
        .addBack() // добавляем предыдущий набор элементов в стеке к текущему набору
        .css('border-left', '10px solid red') // устанавливаем сплошную границу размером 10 пикселей красного цвета с левой стороны

    $('.first')
        .nextUntil('.active') // получаем все элементы, которые являются следующими сестринскими элементами по отношению к текущему элементу в наборе соответствующих элементов, но до и не включая элемента соответствующего классу active
        .css('color', 'green') // устанавливаем цвет текста зеленый
        .addBack('.active') // добавляем предыдущий набор элементов в стеке к текущему набору в том случае, если элемент имеет класс active
        .css('border-left', '10px solid red') // устанавливаем сплошную границу размером 10 пикселей красного цвета с левой стороны
})

style.css

CSS

body {
  margin: 16px;
  font:
    16px/1.5 system-ui,
    sans-serif;
  overflow-wrap: anywhere;
}
img,
input,
select,
textarea,
button {
  max-width: 100%;
}

В этом примере мы создали два маркированных списка (элементы <ul>):

• В первом выбрали элемент списка (элемент <li>) с классом active затем с помощью метода .nextAll() получаем все элементы, которые являются следующими сестринскими элементами по отношению к текущему элементу и с помощью метода .css() устанавливаем им цвет текста зеленый. Далее в цепочке вызываем метод .addBack() благодаря которому добавляем предыдущий набор элементов в стеке к текущему набору. Под предыдущим набором стоит понимать элемент с классом active, то есть у нас были выбраны "Элемент 3" и "Элемент 4", а с помощью метода .addBack() мы добавляем к ним "Элемент 2" и устанавливаем с помощью метода .css() этим элементам сплошную границу размером 10 пикселей красного цвета с левой стороны.
• Во втором выбрали элемент списка (элемент <li>) с классом first затем с помощью метода .nextUntil() получаем все элементы, которые являются следующими сестринскими элементами по отношению к текущему элементу в наборе соответствующих элементов, но до и не включая элемента соответствующего классу active и с помощью метода .css() устанавливаем им цвет текста зеленый. Далее в цепочке вызываем метод .addBack() благодаря которому добавляем предыдущий набор элементов в стеке к текущему набору. Обратите внимание, что мы дополнительно указали селектор в качестве параметра метода, в этом случае элемент будет добавлен в коллекцию только если он будет соответствовать этому селектору. Под предыдущим набором стоит понимать элемент с классом first, то есть у нас были выбраны "Элемент 2", "Элемент 3" и "Элемент 4", а с помощью метода .addBack() мы добавляем к ним "Элемент 1" и устанавливаем с помощью метода .css() этим элементам сплошную границу размером 10 пикселей красного цвета с левой стороны.