jQuery add(expr)

Slyweb

На разработку сайта! Скидки 50%!

Поиск функций jQuery

Характеристика функции

[Функция] add(expr)

Раздел "Traversing"

Функция добавляет дополнительные элементы, соответсвующие заданному выражению, к набору выбранных элементов.

Параметры

add(expr)

1.2

expr: cоответсвующее выражение, с помощью которго происходит добавление элемента, либо строка HTML кода, добавляемая к DOMElement, либо одни или множество элементов, присоединямых к массиву.

add(selector,context)

1.4

selector: выражение, по котрому происходит поиск элементов

context: корневой элемент внутри которого будет осущетсвляться поиск элементов, указанных в параметре selector

Описание

Метод позволяет создать новый jQuery объект, содержащий предыдущие элементы и вновь приоединяемый с помощью данного метода новый элемент. В качвестве первого параметра данного метода могут содержаться элементы структуры DOM или текст HTML.

Возможно, Вам будет интересно прочитать статьи о jQuery:

Примеры

Пример:

Найти все элементы div и установить css свойстов border. Затем добавить все параграфы к jQuery объекту и установить для них css свойство background.

Пример
Весь код

"jQuery"

    $("div").css("border", "2px solid red")
            .add("p")
            .css("background", "yellow");

"HTML"

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
Added this... (notice no border)

"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://slyweb.ru/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>
Added this... (notice no border)


</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>

Пример:

Добавить элементы, соответсвующие установленному выражению, к комплекту выбранных элементов.

Пример
Весь код

"jQuery"

$("p").add("span").css("background", "yellow");

"HTML"

Hello<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://slyweb.ru/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">


Hello<span>Hello Again</span>


</body>
</html>

Пример:

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

Пример
Весь код

"jQuery"

$("p").clone().add("<span>Again</span>").appendTo(document.body);

"HTML"

Hello

"Живой пример jQuery"

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link href="http://slyweb.ru/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">


Hello


</body>
</html>

Пример:

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

Пример
Весь код

"jQuery"

$("p").add(document.getElementById("a")).css("background", "yellow");

"HTML"

Hello<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://slyweb.ru/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">


Hello<span id="a">Hello Again</span>


</body>
</html>

Пример:

Демонстрация как добавить (или поместить) элементы в существующую коллекцию.

Пример
Весь код

"jQuery"

var collection = $("p");
// захват коллекции
collection = collection.add(document.getElementById("a"));
collection.css("background", "yellow");

"HTML"

Hello<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://slyweb.ru/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">


Hello<span id="a">Hello Again</span>


</body>
</html>

Метод появился в jQuery 1.2

Официальная страница метода - http://api.jquery.com/add/

Форма для комментариев

Версия jQuery 1.4.2 Документ создан 2010-08-21

Ошибки и опечатки
Предложения и жалобы
Поддержка сайта

Александр Ермаков. Хостинг - www.pwstudio.org

Руководство jQuery 1.4.2

Плагины jQuery UI

Эффекты

Возможно, Вам будет интересно прочитать статьи о jQuery: