当前位置: 首页>>代码示例 >>用法及示例精选 >>正文

JQuery .clone()用法及代码示例


用法 
.clone(  [withDataAndEvents ] ) => jQuery

说明：创建匹配元素集的深层副本。

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

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

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

    • withDataAndEvents(默认：false)
      类型：Boolean
      一个布尔值，指示是否应将事件处理程序和数据与元素一起复制。默认值为false.*In jQuery 1.5.0 the default value was incorrectly true; it was changed back to false in 1.5.1 and up.
    • deepWithDataAndEvents(默认：value of withDataAndEvents)
      类型：Boolean
      一个布尔值，指示是否应复制克隆元素的所有子元素的事件处理程序和数据。默认情况下，它的值与第一个参数的值匹配(默认为 false )。

.clone() 方法执行匹配元素集的deep 副本，这意味着它复制匹配的元素以及它们的所有后代元素和文本节点。

注意：出于性能原因，某些表单元素的动态状态(例如，输入的用户数据)textarea和用户选择select) 不会复制到克隆的元素。克隆时input元素，元素的动态状态(例如，输入文本输入的用户数据和用户对复选框所做的选择)保留在克隆的元素中。

当与其中一种插入方法结合使用时，.clone() 是一种在页面上复制元素的便捷方法。考虑以下 HTML：

<div class="container">
  <div class="hello">Hello</div>
  <div class="goodbye">Goodbye</div>
</div>

如 .append() 的讨论中所示，通常当一个元素插入 DOM 中的某个位置时，它会从其旧位置移动。所以，给定代码：

$( ".hello" ).appendTo( ".goodbye" );

生成的 DOM 结构将是：

<div class="container">
  <div class="goodbye">
    Goodbye
    <div class="hello">Hello</div>
  </div>
</div>

为了防止这种情况，而是创建元素的副本，您可以编写以下内容：

$( ".hello" ).clone().appendTo( ".goodbye" );

这将产生：

<div class="container">
  <div class="hello">Hello</div>
  <div class="goodbye">
    Goodbye
    <div class="hello">Hello</div>
  </div>
</div>

注意：使用时.clone()方法，您可以在将克隆的元素或其内容(重新)插入到文档之前对其进行修改。

通常，绑定到原始元素的任何事件处理程序都将 not 复制到克隆。可选的withDataAndEvents 参数允许我们更改此行为，并改为制作所有事件处理程序的副本，绑定到元素的新副本。从 jQuery 1.4 开始，所有元素数据(由 .data() 方法附加)也被复制到新副本。

但是，元素数据中的对象和数组不会被复制，并将继续在克隆元素和原始元素之间共享。要深度复制所有数据，请手动复制每个数据：

// 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 开始，可以选择使用 deepWithDataAndEvents 增强 withDataAndEvents 以复制克隆元素的所有子元素的事件和数据。

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

例子：

克隆所有 b 元素(并选择克隆)并将它们添加到所有段落中。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>clone demo</title>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<b>Hello</b><p>, how are you?</p>
 
<script>
$( "b" ).clone().prependTo( "p" );
</script>
 
</body>
</html>

演示：

相关用法


注：本文由纯净天空筛选整理自jquery.com大神的英文原创作品 .clone()。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。