鉴于一个jQuery对象,表示一个DOM元素的集合,.add()
方法通过传递这些元素组合到该方法构造一个新的jQuery对象。.add()
的参数可以几乎接受任何的$()
,包括一个jQuery选择器表达式,DOM元素,或HTML片段引用。
不要假设此方法会按照传递给.add()
方法的参数的顺序添加到已经存在的集合中。如果所有元素都属于同一个文档,.add()
方法所返回的集合将会按照元素在文档中出现的位置进行排序;也就是说,按照每个元素在文档中出现的顺序。如果集合中包含不同文档或不属于任何文档的元素,最后的排序方式未定义(undefined)。为了创建一个包含已定义顺序顺序的jQuery对象,请使用$(array_of_DOM_elements)
。
他更新的元素集合,可以使用以下面的链式调用,或分配给一个变量供以后使用。例如:
$("p").add("div").addClass("widget"); var pdiv = $("p").add("div");
下面将不会保存添加的元素,因为在.add()
方法创建一个新集合,并保持原集合PDIV不变:
var pdiv = $("p"); pdiv.add("div"); // WRONG, pdiv will not change
考虑一个面页中简单的列表和它之后的段落:
<ul> <li>list item 1</li> <li>list item 2</li> <li>list item 3</li> </ul> <p>a paragraph</p>
我们可以选择列表,然后通过使用一个选择器或引用的DOM元素本身作为.add()
方法的参数,将段落添加到列表中:
$('li').add('p').css('background-color', 'red');
或者:
$('li').add(document.getElementsByTagName('p')[0]).css('background-color', 'red');
该调用的结果是四个元素的红色背景。使用片一个HTML段作为 .add()
方法的参数(如在第三个版本),我们可以在动态的创建额外的元素,添加这些元素到匹配的元素集合中。例如,我们可以改变新创建的段落和列表项的背景:
$('li').add('<p id="new">new paragraph</p>').css('background-color', 'red');
虽然已经创建新的段落,并且改变其背景颜色,但是它仍然没有出现在页面上。要想在页面上显示该段落,我们需要在链式方式中使用 jQuery 的插入方法。
在jQuery 1.4结果从.add()将总是返回文档顺序(而不是一个简单的串联)。
注意: 要使用.add()
相反的方法, 您可以使用.not( elements | selector )
从jQuery返回中移除元素, 或使用.end()
返回到添加之前的选择(集合)。