.add()

类别：遍历 > 杂项遍历

.add( selector )返回类型：jQuery

描述：通过把元素添加到匹配元素的集合，来创建一个新的jQuery对象

  • 增补版本：1.0.add( selector )

    • selector
      类型：Selector
      一个字符串，代表一个选择器表达式，找到额外的元素，以添加到匹配的元素集合。

  • 增补版本：1.0.add( elements )

    • elements
      类型：Element
      要添加到匹配的元素集合中的一个或多个元素。

  • 增补版本：1.0.add( html )

    • html
      类型：htmlString
      要添加到匹配的元素集合中的HTML片断。

  • 增补版本：1.3.2.add( selection )

    • selection
      类型：jQuery
      一个已有的jQuery对象，要添加到匹配的元素集合。

  • 增补版本：1.4.add( selector, context )

    • selector
      类型：Selector
      一个字符串，代表一个选择器表达式，找到额外的元素，以添加到匹配的元素集合。
    • context
      类型：Element
      文档中的位点，选择器必须从那里开始匹配，类似于$(selector, context)方法的context参数。

给定一个jQuery对象，代表一些DOM元素，.add()方法依靠那些元素的并集以及传递给此方法的元素，构成了一个新的jQuery对象。.add()的参数可以是$()能接受的任何东西，包括jQuery选择器表达式，对DOM元素的引用，或者HTML片段。

不要假定此方法会以传递给.add()方法的元素顺序把元素追加到已有的集合。如果所有的元素都是同一个文档的成员，来自.add()的结果集合将按文档的顺序排序；也就是说，以每个元素出现在文档中的顺序。如果构成集合的元素来自于不同的文档，或者有些不在任何文档中，排序顺序是不确定的。若要用良好定义顺序的元素创建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" );

Or:

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 1.4以来，来自.add()的结果将始终以文档的顺序返回（而不是简单的串联）。

Note: 若要反转.add()，你可以使用.not( elements | selector )来从jQuery结果中删除元素，或者用.end()来返回添加元素之前的选区。

示例：

找到所有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
30
31
32
33
34
35
36
37
38
39
40
41
42
 
<!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-1.10.2.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>

演示：

把给定的表达式匹配的多个元素添加到匹配的元素集合。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>add demo</title>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<p>Hello</p>
<span>Hello Again</span>
 
<script>
$( "p" ).add( "span" ).css( "background", "yellow" );
</script>
 
</body>
</html>

演示：

快速创建几个元素，把它们添加到匹配的元素集合上。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>add demo</title>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<p>Hello</p>
 
<script>
$( "p" ).clone().add( "<span>Again</span>" ).appendTo( document.body );
</script>
 
</body>
</html>

演示：

把一个或多个元素添加到匹配的元素集合。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>add demo</title>
  <script src="https://code.jquery.com/jquery-1.10.2.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>

演示：

演示如何把元素添加到已有的集合。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>add demo</title>
  <script src="https://code.jquery.com/jquery-1.10.2.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>

演示：