jQuery的 .add 很像一个collection, 官方的这个demo很形象的表达了这个意思。
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 <title>add demo</title> 6 <script src="//code.jquery.com/jquery-1.10.2.js"></script> 7 </head> 8 <body> 9 <p>Hello</p> 10 <span id="a">Hello Again</span> 11 <script> 12 var collection = $( "p" ); 13 // Capture the new collection 14 collection = collection.add( document.getElementById( "a" ) ); 15 collection.css( "background", "yellow" ); 16 </script> 17 </body> 18 </html>
虽然像collection, 但注意下面的不同：
var pdiv = $("p");
pdiv.add("div")
pdiv.css("background-color", "green" );
上面的代码， 只p背景色变为绿, div的背景色不变。
改为下面这样，div的背景色才会也变成绿色。
var pdiv = $("p");
pdiv = pdiv.add("div")
pdiv.css("background-color", "green" );
这种“断链”的问题同样表现在下面的demo中，（jQuery官网中的Examples中）
1 <!doctype html>
2
3 <html lang="en">
4
5 <head>
6
7 <meta charset="utf-8">
8
9 <title>add demo</title>
10
11 <style>
12
13 div {
14
15 width: 60px;
16
17 height: 60px;
18
19 margin: 10px;
20
21 float: left;
22
23 }
24
25 p {
26
27 clear: left;
28
29 font-weight: bold;
30
31 font-size: 16px;
32
33 color: blue;
34
35 margin: 0 10px;
36
37 padding: 2px;
38
39 }
40
41 </style>
42
43 <script src="//code.jquery.com/jquery-1.10.2.js"></script>
44
45 </head>
46
47 <body>
48
49
50
51 <div></div>
52
53 <div></div>
54
55 <div></div>
56
57 <div></div>
58
59 <div></div>
60
61 <div></div>
62
63
64
65 <p>Added this... (notice no border)</p>
66
67
68
69 <script>
70
71 $( "div" ).css( "border", "2px solid red" )
72
73 .add( "p" )
74
75 .css( "background", "yellow" );
76
77 </script>
78
79
80
81 </body>
82
83 </html>
时间： 2024-11-07 13:58:09