# .add()

所属分类：遍历 > 其它遍历 英文文档：.add()

## .add( selector )返回: jQuery

描述: 添加元素到匹配的元素集合。

- #### 添加的版本: 1.0.add( selector )

  - selector
    类型: Selector
    一个字符串表示的选择器表达式，找到更多的元素添加到匹配的元素集合。

- #### 添加的版本: 1.0.add( elements )

  - elements
    类型: Elements
    一个或多个元素添加到匹配的元素集合。

- #### 添加的版本: 1.0.add( html )

  - html
    类型: HTML
    HTML片段添加到匹配的元素集合。

- #### 添加的版本: 1.3.2.add( jQuery object )

  - jQuery object
    类型: jQuery object
    一个现有的jQuery对象添加到匹配的元素集合。

- #### 添加的版本: 1.4.add( selector, context )

  - selector
    类型: Selector
    一个字符串表示的选择器表达式，找到更多的元素添加到匹配的元素集合。
  - context
    类型: Element
    指定选择器查找元素所在的上下文; 类似`$(selector, context)`方法的context（上下文)参数。

鉴于一个jQuery对象，表示一个DOM元素的集合，`.add()`方法通过传递这些元素组合到该方法构造一个新的jQuery对象。`.add()`的参数可以几乎接受任何的`$()`，包括一个jQuery选择器表达式，DOM元素，或HTML片段引用。

不要假设此方法会按照传递给`.add()`方法的参数的顺序添加到已经存在的集合中。如果所有元素都属于同一个文档，`.add()`方法所返回的集合将会按照元素在文档中出现的位置进行排序；也就是说，按照每个元素在文档中出现的顺序。如果集合中包含不同文档或不属于任何文档的元素，最后的排序方式未定义（undefined）。为了创建一个包含已定义顺序顺序的jQuery对象，请使用`$(array_of_DOM_elements)`。

他更新的元素集合，可以使用以下面的链式调用，或分配给一个变量供以后使用。例如：

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

下面将不会保存添加的元素，因为在`.add()`方法创建一个新集合，并保持原集合PDIV不变：

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

考虑一个面页中简单的列表和它之后的段落：

1 2 3 4 5 6 |
    <ul>  <li>list item 1</li>  <li>list item 2</li>  <li>list item 3</li></ul><p>a paragraph</p>

我们可以选择列表，然后通过使用一个选择器或引用的DOM元素本身作为`.add()`方法的参数，将段落添加到列表中：

1 |
    $('li').add('p').css('background-color', 'red');

或者:

1 2 |
    $('li').add(document.getElementsByTagName('p')[0])  .css('background-color', 'red');

该调用的结果是四个元素的红色背景。使用片一个HTML段作为 `.add()`方法的参数（如在第三个版本），我们可以在动态的创建额外的元素，添加这些元素到匹配的元素集合中。例如，我们可以改变新创建的段落和列表项的背景：

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

虽然已经创建新的段落，并且改变其背景颜色，但是它仍然没有出现在页面上。要想在页面上显示该段落，我们需要在链式方式中使用 jQuery 的插入方法。

在jQuery 1.4结果从.add()将总是返回文档顺序（而不是一个简单的串联）。

注意: 要使用`.add()`相反的方法， 您可以使用`.not( elements | selector )` 从jQuery返回中移除元素， 或使用`.end()`返回到添加之前的选择（集合）。

## 例子:

#### Example: 查找所有的 div，并且添加一个边框。然后将所有的段落添加到 jQuery 对象中，并将它们的背景色变成黄色。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
    <!DOCTYPE html><html><head>  <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-latest.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>

#### Demo:

#### Example: 根据给定的表达式，向匹配的元素集合中添加一些元素。

1 2 3 4 5 6 7 8 9 10 11 |
    <!DOCTYPE html><html><head>  <script src="https://code.jquery.com/jquery-latest.js"></script></head><body>  <p>Hello</p><span>Hello Again</span><script>$("p").add("span").css("background", "yellow");</script> </body></html>

#### Demo:

#### Example: 动态的向匹配的元素集合中添加一些元素。

1 2 3 4 5 6 7 8 9 10 11 |
    <!DOCTYPE html><html><head>  <script src="https://code.jquery.com/jquery-latest.js"></script></head><body>  <p>Hello</p><script>$("p").clone().add("<span>Again</span>").appendTo(document.body);</script> </body></html>

#### Demo:

#### Example: 向匹配的元素集合中添加一些元素对象。

1 2 3 4 5 6 7 8 9 10 11 |
    <!DOCTYPE html><html><head>  <script src="https://code.jquery.com/jquery-latest.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>

#### Demo:

#### Example: 以下示例展示了如何向一个已经存在的集合中添加元素。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
    <!DOCTYPE html><html><head>  <script src="https://code.jquery.com/jquery-latest.js"></script></head><body>  <p>Hello</p><span id="a">Hello Again</span><script>var collection = $("p");// capture the new collectioncollection = collection.add(document.getElementById("a"));collection.css("background", "yellow");</script> </body></html>

#### Demo: