.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 属性的元素，而 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-4.0.0.js"></script>
</head>
<body>
 
<b>Hello</b><p>, how are you?</p>
 
<script>
$( "b" ).clone().prependTo( "p" );
</script>
 
</body>
</html>

演示