.clone()

类别：文档处理 > 复制

.clone( [withDataAndEvents ] )返回类型：jQuery

描述：为匹配元素的集合创建一个深复制。

  • 增补版本：1.0.clone( [withDataAndEvents ] )

    • withDataAndEvents (默认值： false)
      类型：Boolean
      一个布尔值，指示事件处理函数是否与元素一起复制。从jQuery 1.4以来，元素数据将被一起复制。

  • 增补版本：1.5.clone( [withDataAndEvents ] [, deepWithDataAndEvents ] )

    • withDataAndEvents (默认值： false)
      类型：Boolean
      一个布尔值，指示事件处理函数和数据是否与元素一起复制。默认值是false。*在jQuery 1.5中，默认值是不正确的true，在jQuery 1.5.1及以后版本中，它被改回false。
    • deepWithDataAndEvents (默认值：withDataAndEvents的值)
      类型：Boolean
      一个布尔值，指示针对被克隆的元素的所有子元素的事件处理函数和数据是否需要一起复制。默认情况下，它的值匹配第一个参数的值（其默认值为false）。

.clone()方法对匹配的元素集合实施了一个深复制，意味着它复制了匹配的元素，以及它们的后代元素和文本节点。

注意： 出于性能原因，某些表单元素的动态状态（例如，用户键入到textarea里的数据以及用户对select做的选择）并不复制到被克隆的元素。当克隆input元素时，元素的动态状态（例如，用户键入到文本字段中的内容，以及用户对勾选框做的选择）保留在被克隆的元素里。

当与一个插入方法配合使用时，.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()方法附加的数据）也会一起复制到新副本。

然而，元素数据内部的对象和数组不会被复制，继续在被克隆的元素和原始元素之间共享。若要复制所有数据，请手工复制每一个：

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特性，而它本应该中独一无二的。如果可能的话，建议你避免利用此特性来克隆元素，或改而使用class作为标识符。

示例：

克隆所有的<b>元素（选择克隆产物），把它们前插入到所有的段落前面。

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>clone demo</title>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<b>Hello</b><p>, how are you?</p>
 
<script>
$( "b" ).clone().prependTo( "p" );
</script>
 
</body>
</html>

演示：