F.Ko-Jiの「一秒後は未来」

jQueryの.clone()でdata属性までコピーするには?

jQueryで「ここにあるのと同じ要素を、そっくりそのままここにappend()したい」ということがよくあって、そんな時に

var source = $('#source');
$('#dst').append(source);

とかすると元の要素が「移動」してしまうので、そうではなくて「コピー」したいという時に「.clone()」を使います。

var source = $('#source').clone();
$('#dst').append(source);

しかしこれだと元の要素に .data() 属性が指定してあっても、.clone()で新しく生成したほうの要素には .data() 属性が引き継がれません。で、これはドキュメントを読めば分かるのですが、引数に「true」を与えれば解決します。

» .clone() – jQuery API

var source = $('#source').clone(true);
$('#dst').append(source);

ドキュメントにあるように、第1引数に「true」を与えるとイベントハンドラと data 属性がコピーされます。初期値は「false」なので、引数を省略してしまうとイベントハンドラや data 属性はコピーされません。

バージョン1.5以降からは第2引数も指定できるようになっていて、第2引数はその要素のすべての子要素について、同様にイベントハンドラと data 属性をコピーするかどうかを指定します。

第2引数が省略された時は、第1引数と同じ値が初期値となります。なので、第1引数にtrueを与えたときは、子要素も含めてイベントハンドラと data 属性がコピーされているということになります。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

著者について

fkoji

F.Ko-Ji

Webエンジニアやってます。最近は ドットインストール の開発がお仕事です。その傍ら、個人で Meity電車遅延なう梅酒.in#グラドル自画撮り部 の部室といったネットサービスを開発・運営してます。梅酒と草野球とリアル脱出ゲームが好きです。

» 詳しいプロフィールや運営サービスの一覧など