jQuery API の clone( [withDataAndEvents] [, deepWithDataAndEvents] ) は、マッチした要素をコピーするメソッド。withDataAndEventsに、trueを設定すると、イベントハンドラや要素データも、要素と一緒にコピーする。deepWithDataAndEventsに、trueを設定すると、子孫要素のイベントハンドラや要素データも、要素と一緒にコピーする。
引数
- withDataAndEvents
booleanType（論理型）。
trueであれば、イベントハンドラや要素データも、要素と一緒にコピーする。
falseであれば、イベントハンドラや要素データは、コピーしない。
- deepWithDataAndEvents
booleanType（論理型）。
trueであれば、子孫要素のイベントハンドラや要素データも、要素と一緒にコピーする。
falseであれば、子孫要素のイベントハンドラや要素データは、コピーしない。
記述方法
「セレクター」にマッチした要素をコピーする。イベントハンドラや要素データも、要素と一緒にコピーする。子孫要素のイベントハンドラや要素データは、コピーしない。
記述例
idがjquery-sampleである要素内のli要素を、コピーし、idがjquery-sampleである要素の最後に追加する。イベントハンドラや要素データも、li要素と一緒にコピーする。子孫要素のイベントハンドラや要素データは、コピーしない。
実装例（サンプル）
- 項目１
- 項目１－１
- 項目１－２
- 項目２
- 項目２－１
- 項目２－２
- 項目３
- 項目３－１
- 項目３－２
実装例（サンプル）の動作について
「項目１－１」をクリックすると、項目１－１をコピーし、リストの最後に追加する。
「項目１」をダブルクリックすると、項目１をコピーし、リストの最後に追加する。
コピーした「項目１」の入れ子の「項目１－１」をクリックしても、コピーしない。
コピーした「項目１」をダブルクリックすると、項目１をコピーし、リストの最後に追加する。
項目２、項目３も同様。
実装例（サンプル）のソースコード
JavaScript
<!--
jQuery( function() {
jQuery( '#jquery-sample-ul > li' ) . dblclick( function () {
jQuery( this ) . clone( true, false ) . appendTo( '#jquery-sample-ul' );
} );
jQuery( '.jquery-sample-ul-ul > li' ) . click( function () {
jQuery( this ) . clone( true, false ) . appendTo( jQuery( this ) . parent() );
} );
} );
// -->
</script>
CSS
<!--
#jquery-sample-ul li{
cursor: pointer;
}
-->
</style>
HTML
<li>項目１
<ul class="jquery-sample-ul-ul">
<li>項目１－１</li>
<li>項目１－２</li>
</ul>
</li>
<li>項目２
<ul class="jquery-sample-ul-ul">
<li>項目２－１</li>
<li>項目２－２</li>
</ul>
</li>
<li>項目３
<ul class="jquery-sample-ul-ul">
<li>項目３－１</li>
<li>項目３－２</li>
</ul>
</li>
</ul>