デザイナーにも分かりやすいjQuery入門講座|jQueryの使い方

このエントリーをはてなブックマークに追加
索引
Core:コアとなる仕組み
Selectors:セレクタ
Attributes:属性
Traversing:対象の変更
Manipulation:操作
CSS:スタイルシート
Events:イベント
Effects:演出効果
Ajax:xml等との連携
Utilities:ユーティリティ
Data:データ
Miscellaneous:諸々
Deferred:処理管理
Callbacks:コールバック
Internals:内部処理

.clone( )要素の複製

構文

要素の複製返値:jQueryオブジェクト
jQo.clone( [true/false] )ver1.0〜
jQo.clone( true, false )ver1.5〜

機能

jQueryオブジェクトで指定した要素を複製します。複製した要素はappendToメソッド等でhtml上に追加する必要があります。引数にtrueを設定すると、イベントや変数なども合わせて複製されます(デフォルトはfalse)。

ver1.5からは第2引数を設定できるようになりました。第2引数にfalseを設定すると子要素にはイベントや変数などを複製しなくなります。

解説

要素を複製します

サンプル(clone/01.html)を開いてbody内にdiv要素が1つあることを確認してください。

<div></div>

jQueryは以下の様に記述され、buttonをクリックするとcloneメソッドによってdiv要素が複製され、
appendToメソッドによってbody内に設置されます。

$("button").click(function(){
	$("div:first").clone().appendTo("body");
})

結果として、buttonをクリックするとdiv要素が複製されhtml上に追加されます。
セレクタに:firstを利用しないと、buttonをクリックされる度に数が倍々になります(例えばdiv要素が4つあったら、それぞれが複製されて8つになります)。

デフォルトではイベントなどを複製しません

複製したい要素にイベントなどが設定されていた場合、イベントなどは複製されません。
サンプル(clone/02.html)を開いてbody内の構成はclone/01.htmlと同じ事を確認してください。jQueryもほとんど同じなのですが、div要素に以下の様にclickイベントが設定され、クリックするとアラートを表示するようにしてあります。

$("div").click(function(){
	alert("CLICK");	
})

結果として、buttonをクリックして複製されたdiv要素はクリックされてもアラートを表示しません。これはcloneメソッドがデフォルトではイベントや変数を複製しないためです。

イベントも複製したい場合は

cloneメソッドは引数にtrueを設定することでイベントや変数も複製することができます。
サンプル(clone/03.html)を開いてbody内の構成がclone/02.htmlと同じ事を確認してください。jQueryもほとんど同じ(クリックのイベントが設定されています)なのですが、以下の様にcloneメソッドの引数にtrueが設定してあります。

$("button").click(function(){
	$("div:first").clone(true).appendTo("body");
})

結果として、buttonをクリックして複製されたdiv要素もクリックすればアラートが表示されるようになります。

子孫要素のイベントも複製されます

サンプル(clone/04.html)を開いてbody内の構成を確認してください。以下の様にdiv要素内にspan要素が追加されています。

<div><span>test</span></div>

jQueryにも以下のように処理が追加され、hoverイベントによって、span要素にマウスオーバーすると背景色がオレンジ色になるようにしてあります。

$("span").hover(
	function(){$(this).css("background-color","#f93")},
	function(){$(this).css("background-color","#09C")}
)

cloneメソッドの処理はclone/03.htmlから変更は無く、引数にtrueを設定してあります。結果として、buttonをクリックしてdiv要素を複製すると、子要素であるspan要素のイベントも複製されているのが確認できます。

子孫要素のイベントは複製したくない場合は

ver1.5からcloneメソッドの第2引数にfalseを設定すると、子孫要素のイベントなどを複製しないようにできます。サンプル(clone/05.html)を開いてbody内の構成はclone/04.htmlと同じ事を確認してください。jQueryもほとんど同じなのですが、以下の様にcloneメソッドの第2引数にfalseが設定してあります。
第2引数を省略した場合は、第1引数と同じ設定にります。

$("button").click(function(){
	$("div:first").clone(true,false).appendTo("body");
})

結果として、buttonをクリックして複製したdiv要素はクリックするとアラートを表示しますが、子要素のsapn要素はマウスオーバーしても背景色が変わりません。

メモ

第1引数はfalseで、第2引数をtrueにしても...

第1引数と第2引数の組合せとしてはfalse,trueという設定もあると思うのですが(子孫要素のイベントなどだけをコピーする)、そのような設定はできないようです。実際にcloneメソッドの引数にfalse,trueと設定したサンプルを用意しました。→参考:サンプル(clone/test01.html

$("button").click(function(){
	$("div:first").clone(false,true).appendTo("body");
})

結果としては、複製対象も、その子要素もイベントは複製されませんでした。