.addBack()

.addBack( [selector ] )Возвращает: jQuery

Описание: Добавить предыдущий набор элементов в стеке к текущему набору, необязательно отфильтровав их по селектору.

версия добавлена: 1.8.addBack( [selector ] )
- selector
  
  Тип: Селектор
  
  Строка, содержащая выражение селектора для сопоставления текущего набора элементов.

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

Рассмотрим страницу с простым списком:

<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li class="third-item">list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
</ul>

Результат выполнения следующего кода — красный фон за элементами 3, 4 и 5:

$( "li.third-item" ).nextAll().addBack()
  .css( "background-color", "red" );

Сначала начальный селектор находит элемент 3, инициализируя стек набором, содержащим только этот элемент. Вызов .nextAll() затем помещает набор элементов 4 и 5 в стек. Наконец, вызов .addBack() объединяет эти два набора, создавая объект jQuery, указывающий на все три элемента в порядке следования в документе: {[<li.third-item>,<li>,<li> ]}.

Пример:

Метод .addBack() вызывает добавление предыдущего набора элементов DOM в стеке обхода к текущему набору. В первом примере верхний стек содержит набор, полученный в результате .find("p"). Во втором примере .addBack() добавляет предыдущий набор элементов в стеке — в данном случае $("div.after-addback") — к текущему набору, выбирая как div, так и его вложенные абзацы.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>addBack demo</title>
  <style>
  p, div {
    margin: 5px;
    padding: 5px;
  }
  .border {
    border: 2px solid red;
  }
  .background {
    background: yellow;
  }
  .left, .right {
    width: 45%;
    float: left;
  }
  .right {
    margin-left: 3%;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
 
<div class="left">
  <p><strong>Before <code>addBack()</code></strong></p>
  <div class="before-addback">
    <p>First Paragraph</p>
    <p>Second Paragraph</p>
  </div>
</div>
<div class="right">
  <p><strong>After <code>addBack()</code></strong></p>
  <div class="after-addback">
    <p>First Paragraph</p>
    <p>Second Paragraph</p>
  </div>
</div>
 
<script>
$( "div.left, div.right" ).find( "div, div > p" ).addClass( "border" );
 
// First Example
$( "div.before-addback" ).find( "p" ).addClass( "background" );
 
// Second Example
$( "div.after-addback" ).find( "p" ).addBack().addClass( "background" );
</script>
 
</body>
</html>

.addBack( [selector ] )Возвращает: jQuery

версия добавлена: 1.8.addBack( [selector ] )

Пример:

Демо: