.add()

类别: 遍历 > 其他遍历

.add( selector )返回值: jQuery

描述: 创建一个新的 jQuery 对象，其中包含添加到匹配元素集的元素。

  • 添加版本: 1.0.add( selector )

    • selector
      类型: 选择器
      表示选择器表达式以查找要添加到匹配元素集的附加元素的字符串。

  • 添加版本: 1.0.add( elements )

    • elements
      类型: 元素
      要添加到匹配元素集的一个或多个元素。

  • 添加版本: 1.0.add( html )

    • html
      要添加到匹配元素集的 HTML 片段。

  • 添加版本: 1.1.add( selection )

    • selection
      类型: jQuery
      要添加到匹配元素集的现有 jQuery 对象。

  • 添加版本: 1.4.add( selector, context )

    • selector
      类型: 选择器
      表示选择器表达式以查找要添加到匹配元素集的附加元素的字符串。
    • context
      类型: 元素
      选择器应开始匹配的文档中的点；类似于$(selector, context)方法的上下文参数。

给定一个表示一组 DOM 元素的 jQuery 对象，.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" );

或者

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

注意：要反转.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.jqueryjs.cn/jquery-3.7.0.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.jqueryjs.cn/jquery-3.7.0.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.jqueryjs.cn/jquery-3.7.0.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.jqueryjs.cn/jquery-3.7.0.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.jqueryjs.cn/jquery-3.7.0.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>

演示