Описание: Добавляет элементы к набору соответствующих элементов.
.add( селектор )
Добавлена в версию: 1.0
селектор
Выражение, с помощью которого можно отфильтровать дополнительные элементы.
.add( элементы )
Добавлена в версию: 1.0
элементы
Один или более элементов для присоединения к соответствующим элементам.
.add( html )
Добавлена в версию: 1.0
html
Фрагмент HTML для присоединения к набору соответствующих элементов.
.add( селектор, контекст )
Добавлена в версию: 1.4
селектор
Выражение, с помощью которого можно отфильтровать дополнительные элементы.
контекст
Добавляет некоторые элементы в соответствии с указанным контекстом.
Учитывая объект jQuery, который представляет набор элементов DOM, метод .add() конструирует новый объект jQuery из объединения этих элементов и единожды посылает их в метод.
Аргументом в .add() может быть что угодно, что принимает $(), включая выражение выбора jQuery, ссылки на элементы DOM, или отрывок HTML.
Рассмотрим страницу с простым списком и следующим за ним параграфом:
<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()
всегда будет возвращен в упорядоченный документ (а не просто сцепление).
Примеры
Пример 1
Поиск всех элементов div и установка им рамки красного цвета. Затем все параграфы добавляются в уже существующий объект jQuery и им устанавливается фон желтого цвета.Пример 1 - Полный код:
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript" language="javascript"> $(document).ready(function(){ $("div").css("border", "2px solid red") .add("p") .css("background", "yellow"); }); </script> <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> </head> <body> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <p>Added this... (notice no border)</p> </body> </html>
Пример 2
Добавляет в уже существующий набор дополнительные элементы, которые удовлетворяют указанному выражению.Пример 2 - Полный код:
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript" language="javascript">; $(document).ready(function(){ $("p").add("span").css("background", "yellow"); }); </script> </head> <body> <p>Hello</p><span>Hello Again</span> </body> </html>
Пример 3
Добавляет в уже существующий набор дополнительные элементы, созданные на лету.Пример 3 - Полный код:
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript" language="javascript"> $(document).ready(function(){ $("p").clone().add("<span>Again</span>").appendTo(document.body); }); </script> </head> <body> <p>Hello</p> </body> </html>
Пример 4
Добавляет в уже существующий набор один или более элемент(ов).Пример 4 - Полный код:
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript" language="javascript"> $(document).ready(function(){ $("p").add(document.getElementById("a")).css("background", "yellow"); }); </script> </head> <body> <p>Hello</p><span id="a">Hello Again</span> </body> </html>
Пример 5
Демонстрирует, как добавить элементы в существующую коллекцию.var collection = $("p");
// capture the new collection
collection = collection.add(document.getElementById("a"));
collection.css("background", "yellow");
Пример 5 - Полный код:
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript" language="javascript"> $(document).ready(function(){ $("p").add(document.getElementById("a")).css("background", "yellow"); }); </script> </head> <body> <p>Hello</p><span id="a">Hello Again</span> </body> </html>
Была ли эта информация полезной?
