>>  賞品はこちらで紹介しています 
jQuery逆引きリファレンス

jQuery逆引きリファレンス

既存の要素をコピーするには? ― cloneメソッド

2016年11月2日

既存の要素をjQueryオブジェクトとして複製する方法を説明。オブジェクトはappendToなどの挿入系メソッドを使ってHTMLソース内に要素として追加したりできる。

  • このエントリーをはてなブックマークに追加

 既存要素の複製を作成するには、cloneメソッドを利用します。「ページ内の特定の要素をコピーして、他の箇所に挿入したい」という場合などに利用します。

 例えば以下は、テーブルの行をクリックすると、これを複製して、テーブルの最終行に追加する例です。

HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery TIPS</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
</head>
<body>
<table id="tbl" class="table">
  <tr><th>楽器名</th><th>分類</th><th>貸出</th></tr>
  <tr><td>フルート</td><td>木管楽器</td><td>OK</td></tr>
  <tr><td>ヴァイオリン</td><td>弦楽器</td><td>OK</td></tr>
  <tr><td>チェンバロ</td><td>鍵盤楽器</td><td>NG</td></tr>
</table>
<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script>
$(function () {
  $('tr').click(function() {
    $(this).clone().appendTo('#tbl');
  });

  $('td').hover(function() {
    $(this).css('background-color', 'Yellow');
  }, function() {
    $(this).css('background-color', '');
  });
});
</script>
</body>
</html>
リスト1 クリックされた行をコピーしてテーブル末尾に追加(clone.html)
[フルート]の行を2回クリックすると……

[フルート]の行を2回クリックすると……

テーブル末尾に2つの[フルート]行が追加された

テーブル末尾に2つの[フルート]行が追加された

図1 行をクリックすると、その行の内容がテーブル末尾に追加される

 ただし、複製された行にはデフォルトではイベントリスナーが設置されませんので、クリックしても行は増えませんし、複製された行の背景色も消えません。もしもイベントリスナーまで含めて複製したい場合には、cloneメソッドの引数にtrueを設定してください。

JavaScript
$(this).clone(true).appendTo('#tbl');
リスト2 現在の要素のイベントリスナーも複製

 これにより、複製された行の背景色は消え、クリックすると行が増やせるようになります。

 ただし、「現在の要素のイベントリスナーは複製しても、子要素のイベントリスナーは無視したい」ということもあるでしょう。この場合、cloneメソッドの第2引数にfalseをセットします。

JavaScript
$(this).clone(true, false).appendTo('#tbl');
リスト3 子要素のイベントリスナーは複製しない

 これによって、複製された行をクリックすることで行は増えますが、マウスを乗せても(外しても)背景色は変化しないようになります。つまり、子要素のイベントリスナーだけが複製されていないわけです。

処理対象:要素のコピー カテゴリ:要素
API:jQuery() カテゴリ:Core(コア)
API:.clone() カテゴリ:Manipulation(操作) > Copying(コピー)

※以下では、本稿の前後を合わせて5回分(第55回~第59回)のみ表示しています。
 連載の全タイトルを参照するには、[この記事の連載 INDEX]を参照してください。

55. 現在の要素セットを特定の要素でラップするには? ― wrap/wrapAll/wrapInnerメソッド

現在の要素セットを新要素でラップする(=新要素の子要素にする)方法を解説。メソッドを使い分けることで、要素セットに対して個々に要素全体を/全ての要素をまとめて/個々に中身(=子要素)のみをラップできる。

56. 既存の要素を削除するには? ― remove/emptyメソッド

指定した要素そのもの/要素の中身(=子要素)を削除する方法を説明する。

57. 【現在、表示中】≫ 既存の要素をコピーするには? ― cloneメソッド

既存の要素をjQueryオブジェクトとして複製する方法を説明。オブジェクトはappendToなどの挿入系メソッドを使ってHTMLソース内に要素として追加したりできる。

58. thisキーワードの参照先を固定するには?($.proxy)

文脈により変化するthisキーワードの参照先を、$.proxyメソッドにより固定する方法を説明する。

59. 一般的なAjax通信を実装するには?($.ajax)

非同期通信の動作をより細かく制御したい場面で使える$.ajaxメソッドの構文と利用可能なパラメーター群の概要を紹介。簡単なサンプルで使い方を説明する。

GrapeCity Garage 記事内容の紹介

Azure Central の記事内容の紹介

Twitterでつぶやこう!


Build Insider賛同企業・団体

Build Insiderは、以下の企業・団体の支援を受けて活動しています(募集概要)。

ゴールドレベル

  • グレープシティ株式会社
  • 日本マイクロソフト株式会社