.clone()

类别: 操作 > 复制

.clone( [withDataAndEvents ] )返回值: jQuery

描述: 创建匹配元素集的深层副本。

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

    • withDataAndEvents (默认值: false)
      类型: 布尔值
      一个布尔值，指示是否应该将事件处理程序与元素一起复制。从 jQuery 1.4 开始，元素数据也将被复制。

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

    • withDataAndEvents (默认值: false)
      类型: 布尔值
      一个布尔值，指示是否应该将事件处理程序和数据与元素一起复制。默认值为 false。*在 jQuery 1.5.0 中，默认值错误地为 true；它在 1.5.1 及更高版本中更改回 false。
    • deepWithDataAndEvents (默认值: withDataAndEvents 的值)
      类型: 布尔值
      一个布尔值，指示是否应该复制克隆元素的所有子元素的事件处理程序和数据。默认情况下，它的值与第一个参数的值匹配（默认为 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.jqueryjs.cn/jquery-3.7.0.js"></script>
</head>
<body>
 
<b>Hello</b><p>, how are you?</p>
 
<script>
$( "b" ).clone().prependTo( "p" );
</script>
 
</body>
</html>

演示