當前位置: 首頁>>代碼示例 >>用法及示例精選 >>正文

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()。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。