.add()

.add( selector )Возвращает: jQuery

Описание: Создаёт новый объект jQuery с элементами, добавленными к набору сопоставленных элементов.

версия добавлена: 1.0.add( selector )
- selector
  
  Тип: Селектор
  
  Строка, представляющая выражение селектора для поиска дополнительных элементов, которые нужно добавить в набор сопоставленных элементов.
версия добавлена: 1.0.add( elements )
- elements
  
  Тип: Элемент
  
  Один или несколько элементов для добавления в набор сопоставленных элементов.
версия добавлена: 1.0.add( html )
- html
  
  Тип: htmlString
  
  HTML-фрагмент для добавления в набор сопоставленных элементов.
версия добавлена: 1.1.add( selection )
- selection
  
  Тип: jQuery
  
  Существующий объект jQuery для добавления в набор сопоставленных элементов.
версия добавлена: 1.4.add( selector, context )
- selector
  
  Тип: Селектор
  
  Строка, представляющая выражение селектора для поиска дополнительных элементов, которые нужно добавить в набор сопоставленных элементов.
- context
  
  Тип: Элемент
  
  Точка в документе, с которой селектор должен начинать сопоставление; аналогично аргументу context метода $(selector, context).

Для данного объекта jQuery, представляющего набор элементов DOM, метод .add() строит новый объект jQuery из объединения этих элементов и элементов, переданных в метод. Аргумент для .add() может быть практически чем угодно, что $() принимает, включая выражение селектора jQuery, ссылки на элементы DOM или фрагмент HTML.

Не предполагайте, что этот метод добавляет элементы в существующий набор в порядке их передачи в метод .add(). Когда все элементы являются членами одного документа, результирующий набор от .add() будет отсортирован в порядке документа; то есть в порядке появления каждого элемента в документе. Если набор состоит из элементов из разных документов или элементов, которые не находятся в каком-либо документе, порядок сортировки не определён. Для создания объекта jQuery с элементами в определённом порядке и без накладных расходов на сортировку используйте сигнатуру $(array_of_DOM_elements).

Обновлённый набор элементов может быть использован в последующем (цепном) методе или присвоен переменной для последующего использования. Например:

$( "p" ).add( "div" ).addClass( "widget" );
var pdiv = $( "p" ).add( "div" );

Следующее не сохранит добавленные элементы, потому что метод .add() создаёт новый набор и оставляет исходный набор в pdiv неизменным:

var pdiv = $( "p" );
pdiv.add( "div" ); // WRONG, pdiv will not change

Представьте страницу со списком и абзацем после него:

<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
</ul>
<p>a paragraph</p>

Мы можем выбрать элементы списка и затем абзац, используя селектор или ссылку на сам элемент DOM в качестве аргумента метода .add().

$( "li" ).add( "p" ).css( "background-color", "red" );

Или:

$( "li" ).add( document.getElementsByTagName( "p" )[ 0 ] )
  .css( "background-color", "red" );

Результат этого вызова — красный фон за всеми четырьмя элементами. Используя фрагмент HTML в качестве аргумента метода .add() (как в третьем варианте), мы можем создавать дополнительные элементы на лету и добавлять эти элементы в сопоставленный набор элементов. Предположим, например, что мы хотим изменить цвет фона элементов списка вместе с только что созданным абзацем:

$( "li" ).add( "<p id='new'>new paragraph</p>" )
  .css( "background-color", "red" );

Хотя новый абзац был создан и его цвет фона изменён, он всё ещё не отображается на странице. Чтобы разместить его на странице, мы могли бы добавить один из методов вставки в цепочку.

Начиная с jQuery 1.4, результаты .add() всегда будут возвращаться в порядке документа (а не простым конкатенацией).

Примечание: Чтобы обратить .add() действие, можно использовать .not( elements | selector ) для удаления элементов из результатов jQuery или .end() для возврата к выбору до добавления.

Примеры:

Находит все блоки div и задаёт им границу. Затем добавляет все абзацы в объект jQuery, чтобы установить их цвет фона жёлтым.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>add demo</title>
  <style>
  div {
    width: 60px;
    height: 60px;
    margin: 10px;
    float: left;
  }
  p {
    clear: left;
    font-weight: bold;
    font-size: 16px;
    color: blue;
    margin: 0 10px;
    padding: 2px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
 
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
 
<p>Added this... (notice no border)</p>
 
<script>
$( "div" ).css( "border", "2px solid red" )
  .add( "p" )
  .css( "background", "yellow" );
</script>
 
</body>
</html>

Демо:

Добавляет больше элементов, сопоставленных заданным выражением, в набор сопоставленных элементов.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>add demo</title>
  <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
 
<p>Hello</p>
<span>Hello Again</span>
 
<script>
$( "p" ).add( "span" ).css( "background", "yellow" );
</script>
 
</body>
</html>

Демо:

Добавляет больше элементов, созданных на лету, в набор сопоставленных элементов.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>add demo</title>
  <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
 
<p>Hello</p>
 
<script>
$( "p" ).clone().add( "<span>Again</span>" ).appendTo( document.body );
</script>
 
</body>
</html>

Демо:

Добавляет один или несколько элементов в набор сопоставленных элементов.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>add demo</title>
  <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
 
<p>Hello</p>
<span id="a">Hello Again</span>
 
<script>
$( "p" ).add( document.getElementById( "a" ) ).css( "background", "yellow" );
</script>
 
</body>
</html>

Демо:

Демонстрирует, как добавить (или добавить) элементы в существующий набор

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>add demo</title>
  <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
 
<p>Hello</p>
<span id="a">Hello Again</span>
 
<script>
var collection = $( "p" );
// Capture the new collection
collection = collection.add( document.getElementById( "a" ) );
collection.css( "background", "yellow" );
</script>
 
</body>
</html>

.add( selector )Возвращает: jQuery

версия добавлена: 1.0.add( selector )

версия добавлена: 1.0.add( elements )

версия добавлена: 1.0.add( html )

версия добавлена: 1.1.add( selection )

версия добавлена: 1.4.add( selector, context )

Примеры:

Демо:

Демо:

Демо:

Демо:

Демо: