[Функция] add(expr)
Раздел "Traversing"
Функция добавляет дополнительные элементы, соответсвующие заданному выражению, к набору выбранных элементов.
Параметры
add(expr)
1.2
expr: cоответсвующее выражение, с помощью которго происходит добавление элемента, либо строка HTML кода, добавляемая к DOMElement, либо одни или множество элементов, присоединямых к массиву.
add(selector,context)
1.4
selector:
выражение, по котрому происходит поиск элементов
context:
корневой элемент внутри которого будет осущетсвляться поиск элементов, указанных в параметре selector
Описание
Метод позволяет создать новый jQuery объект, содержащий предыдущие элементы и вновь приоединяемый с помощью данного метода новый элемент. В качвестве первого параметра данного метода могут содержаться элементы структуры DOM или текст HTML.
Примеры
Пример:
Найти все элементы div и установить css свойстов border. Затем добавить все параграфы к jQuery объекту и установить для них css свойство background.
"HTML"
<div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <p>Added this... (notice no border)</p>
"CSS"
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; }
"Живой пример jQuery"
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <link href="http://test-drupal.ru/themes/slyweb/css/jqueryiframe.css" rel="stylesheet" type="text/css"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script> <script> $(document).ready(function(){ $("div").css("border", "2px solid red") .add("p") .css("background", "yellow"); }); </script> </head> <body class="iframe"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <p>Added this... (notice no border)</p> </body> </html> <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>
Пример:
Добавить элементы, соответсвующие установленному выражению, к комплекту выбранных элементов.
"HTML"
<p>Hello</p><span>Hello Again</span>
"Живой пример jQuery"
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <link href="http://test-drupal.ru/themes/slyweb/css/jqueryiframe.css" rel="stylesheet" type="text/css"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script> <script> $(document).ready(function(){ $("p").add("span").css("background", "yellow"); }); </script> </head> <body class="iframe"> <p>Hello</p><span>Hello Again</span> </body> </html>
Пример:
Добавить элементы, созданные на лету, к комплекту выбранных элементов.
"HTML"
<p>Hello</p>
"Живой пример jQuery"
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <link href="http://test-drupal.ru/themes/slyweb/css/jqueryiframe.css" rel="stylesheet" type="text/css"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script> <script> $(document).ready(function(){ $("p").clone().add("<span>Again</span>").appendTo(document.body); }); </script> </head> <body class="iframe"> <p>Hello</p> </body> </html>
Пример:
Добавить один или несколько элементов к комплекту выбранных элементов.
"HTML"
<p>Hello</p><span id="a">Hello Again</span>
"Живой пример jQuery"
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <link href="http://test-drupal.ru/themes/slyweb/css/jqueryiframe.css" rel="stylesheet" type="text/css"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script> <script> $(document).ready(function(){ $("p").add(document.getElementById("a")).css("background", "yellow"); }); </script> </head> <body class="iframe"> <p>Hello</p><span id="a">Hello Again</span> </body> </html>
Пример:
Демонстрация как добавить (или поместить) элементы в существующую коллекцию.
"jQuery"
var collection = $("p"); // захват коллекции collection = collection.add(document.getElementById("a")); collection.css("background", "yellow");
"HTML"
<p>Hello</p><span id="a">Hello Again</span>
"Живой пример jQuery"
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <link href="http://test-drupal.ru/themes/slyweb/css/jqueryiframe.css" rel="stylesheet" type="text/css"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script> <script> $(document).ready(function(){ var collection = $("p"); // захват коллекции collection = collection.add(document.getElementById("a")); collection.css("background", "yellow"); }); </script> </head> <body class="iframe"> <p>Hello</p><span id="a">Hello Again</span> </body> </html>
Версия jQuery 1.4.2
Документ создан 2010-08-21