.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.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
 
<b>Hello</b><p>, how are you?</p>
 
<script>
$( "b" ).clone().prependTo( "p" );
</script>
 
</body>
</html>

示範