.clone()

分类: Manipulation > Copying

.clone( [withDataAndEvents ] )返回: jQuery

描述: 创建一个匹配的元素集合的深度拷贝副本。

  • 添加的版本: 1.0.clone( [withDataAndEvents ] )

    • withDataAndEvents (默认: false)
      类型: Boolean
      一个Boolean值，表示是否会复制元素上的事件处理函数。从jQuery 1.4开始，元素数据也会被复制。

  • 添加的版本: 1.5.clone( [withDataAndEvents ] [, deepWithDataAndEvents ] )

    • withDataAndEvents (默认: false)
      类型: Boolean
      一个Boolean值，表示是否会复制元素上的事件处理函数。 默认值是 false。*对于1.5.0的默认值被不适当地设置成了true，将在1.5.1以上改回false 。
    • deepWithDataAndEvents (默认: value of withDataAndEvents)
      类型: Boolean
      一个布尔值，指示是否对事件处理程序和克隆的元素的所有子元素的数据应该被复制。默认情况下它的值相匹配的第一个参数的值（ 默认值是 false）

.clone()方法深度 复制所有匹配的元素集合，包括所有匹配元素、匹配元素的下级元素、文字节点。

注意:出于性能方面的考虑，表单元素动态的状态（例如，用户将数据输入到 textarea中的值，或者用户在select中已经选中某一项）不会被复制到克隆元素。当克隆input元素时候，该元素的动态状态（例如，用户数据输入到文本输入框(注： <input type="text">) 和用户选中一个复选框）将被保留在克隆元素中。

当和插入方法联合使用时，.clone()对于复制页面上的元素很方便。请看下面的HTML：

1
2
3
4
 
<div class="container">
  <div class="hello">Hello</div>
  <div class="goodbye">Goodbye</div>
</div>

像我们讨论.append()一样，通常我们将页面上一个元素插入到DOM里另立个地方，它会被从老地方移走（注：不是复制）。所以，给定下面的代码：

1
 
$('.hello').appendTo('.goodbye');

得到的DOM结构如下：

1
2
3
4
5
6
 
<div class="container">
  <div class="goodbye">
    Goodbye
    <div class="hello">Hello</div>
  </div>
</div>

但是我们如果需要的是复制而不是移除，我们可以像下面这样写代码：

1
 
$('.hello').clone().appendTo('.goodbye');

结果会是：

1
2
3
4
5
6
7
 
<div class="container">
  <div class="hello">Hello</div>
  <div class="goodbye">
    Goodbye
    <div class="hello">Hello</div>
  </div>
</div>

注意:当我们用.clone()方法时，在将它插入到文档之前，我们可以修改克隆后的元素或者元素内容。

通常，任何绑定绑定在原始元素上的事件处理函数都不会 被复制到克隆元素。可选的withDataAndEvents 参数允许我们改变该默认行为，从而将所有绑定在原始元素上的事件处理函数复制到克隆元素上。对于jQuery 1.4，所有元素数据（ .data()方法返回的内容）同样被复制到新的克隆元素。

然而，元素数据（data）内对象和数组不会被复制，将继续被克隆元素和原始元素共享。深复制的所有数据，需要手动复制每一个：

1
2
3
4
5
 
// Original element with attached data
var $elem = $( "#elem" ).data( "arr", [ 1 ] ),
    $clone = $elem.clone( true )
      // Deep copy to prevent data sharing
      .data( "arr", $.extend( [], $elem.data( "arr" ) ) );

在jQuery 1.5，withDataAndEvents可以选择性增强deepWithDataAndEvents复制元素的事件和数据的克隆的所有子元素。

注意: 使用.clone()可能产生id属性重复的元素的副作用，id应该是唯一的。在可能的情况下，建议，应避免克隆有此属性或标识符的元素，使用类（class）属性代替。

例子:

Example: 复制所有 b 元素然后将他们插入到所有段落里面的前面。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
<!DOCTYPE html>
<html>
<head>
  <script src="//code.jquery.com/jquery-latest.js"></script>
</head>
<body>
 
  <b>Hello</b><p>, how are you?</p>
 
<script>
  $("b").clone().prependTo("p");
</script>
 
</body>
</html>

Demo:

Example: 当使用 .clone()克隆一组元素，并且这些克隆生成的元素尚未被添加到 DOM 中，那么当这些元素被插入到 DOM 中时，不能保证是按它们的原顺序被插入的。但是，可以像下面例子中提到的那样，保证顺序的正确性：

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
43
 
<!DOCTYPE html>
<html>
<head>
  <style>
  #orig, #copy, #copy-correct {
    float: left;
    width: 20%;
  }
</style>
  <script src="//code.jquery.com/jquery-latest.js"></script>
</head>
<body>
 
<div id="orig">
    <div class="elem"><a>1</a></div>
    <div class="elem"><a>2</a></div>
    <div class="elem"><a>3</a></div>
    <div class="elem"><a>4</a></div>
    <div class="elem"><a>5</a></div>
</div>
<div id="copy"></div>
<div id="copy-correct"></div>
 
<script>
// sort order is not guaranteed here and may vary with browser
$('#copy').append($('#orig .elem')
          .clone()
          .children('a')
          .prepend('foo - ')
          .parent()
          .clone());
 
// correct way to approach where order is maintained
$('#copy-correct')
          .append($('#orig .elem')
          .clone()
          .children('a')
          .prepend('bar - ')
          .end());
</script>
 
</body>
</html>

Demo: