jQuery逆引きリファレンス
既存の要素をコピーするには？ ― cloneメソッド
既存の要素をjQueryオブジェクトとして複製する方法を説明。オブジェクトはappendToなどの挿入系メソッドを使ってHTMLソース内に要素として追加したりできる。
既存要素の複製を作成するには、cloneメソッドを利用します。「ページ内の特定の要素をコピーして、他の箇所に挿入したい」という場合などに利用します。
例えば以下は、テーブルの行をクリックすると、これを複製して、テーブルの最終行に追加する例です。
|
<!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>
|
［フルート］の行を2回クリックすると……
テーブル末尾に2つの［フルート］行が追加された
ただし、複製された行にはデフォルトではイベントリスナーが設置されませんので、クリックしても行は増えませんし、複製された行の背景色も消えません。もしもイベントリスナーまで含めて複製したい場合には、cloneメソッドの引数にtrueを設定してください。
|
$(this).clone(true).appendTo('#tbl');
|
これにより、複製された行の背景色は消え、クリックすると行が増やせるようになります。
ただし、「現在の要素のイベントリスナーは複製しても、子要素のイベントリスナーは無視したい」ということもあるでしょう。この場合、cloneメソッドの第2引数にfalseをセットします。
|
$(this).clone(true, false).appendTo('#tbl');
|
これによって、複製された行をクリックすることで行は増えますが、マウスを乗せても（外しても）背景色は変化しないようになります。つまり、子要素のイベントリスナーだけが複製されていないわけです。
API：jQuery() カテゴリ：Core（コア）
API：.clone() カテゴリ：Manipulation（操作） > Copying（コピー）
※以下では、本稿の前後を合わせて5回分（第55回～第59回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
55. 現在の要素セットを特定の要素でラップするには？ ― wrap／wrapAll／wrapInnerメソッド
現在の要素セットを新要素でラップする（＝新要素の子要素にする）方法を解説。メソッドを使い分けることで、要素セットに対して個々に要素全体を／全ての要素をまとめて／個々に中身（＝子要素）のみをラップできる。
57. 【現在、表示中】≫ 既存の要素をコピーするには？ ― cloneメソッド
既存の要素をjQueryオブジェクトとして複製する方法を説明。オブジェクトはappendToなどの挿入系メソッドを使ってHTMLソース内に要素として追加したりできる。
59. 一般的なAjax通信を実装するには？（$.ajax）
非同期通信の動作をより細かく制御したい場面で使える$.ajaxメソッドの構文と利用可能なパラメーター群の概要を紹介。簡単なサンプルで使い方を説明する。
