.add()

.add( selector ) 返回: jQuery

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

  • version added: 1.0.add( selector )

    selector一个用于匹配元素的选择器字符串。

  • version added: 1.0.add( elements )

    elements一个或多个元素添加到匹配的元素。

  • version added: 1.0.add( html )

    htmlHTML片段添加到匹配的元素。

  • version added: 1.4.add( selector, context )

    selector一个用于匹配元素的选择器字符串。

    context对指定的范围内添加一些根元素。

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

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

<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 1.4结果从.add()将总是返回文档顺序(而不是一个简单的串联)。

Examples:

Example: Finds all divs and makes a border. Then adds all paragraphs to the jQuery object to set their backgrounds yellow.

<!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="http://code.jquery.com/jquery-latest.min.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: Adds more elements, matched by the given expression, to the set of matched elements.

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
  <p>Hello</p><span>Hello Again</span>
<script>$("p").add("span").css("background", "yellow");</script>

</body>
</html>

Demo:

Example: Adds more elements, created on the fly, to the set of matched elements.

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
  <p>Hello</p>
<script>$("p").clone().add("<span>Again</span>").appendTo(document.body);</script>

</body>
</html>

Demo:

Example: Adds one or more Elements to the set of matched elements.

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.min.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: Demonstrates how to add (or push) elements to an existing collection

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.min.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>

Demo:

设计酷,jquery1.6 api中文手册