ywork2020.com

Title

既存の要素のコピー要素を作る

目次 (INDEX)

cloneとは

ここで説明するclone とは次の語句からなるjQueryのメソッドです。
clone
読み: クローン
意味: 複製

目次に戻る

cloneメソッドの概要

このメソッドはセレクタに指定した既存の要素の複製を作ることができます。

セレクタに親要素を指定した場合には、その子要素のクローンも同時に作成されます。

引数にはboolean型の値を指定します。既定値はfalseですので引数を空にした場合にはfalseが自動的に設定されます。 引数の効果については下記のリストを参考してください。

  • clone(false):
    オリジナル要素のカスタムデータとイベントは複製した要素に含まれません。
  • clone(true):
    オリジナル要素のカスタムデータとイベントを複製した要素にもコピーします。
  • clone(false,false):
    オリジナル要素と子要素のカスタムデータとイベントは複製した要素に含まれません。
  • clone(true,true):
    オリジナル要素と子要素のカスタムデータとイベントを複製した要素にもコピーします。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。

[withDataAndEvents]は複製の対象元となる要素についてカスタムデータとイベントもコピーするかどうかをboolean型で指定します。 また[, deepWithDataAndEvents]の部分は子要素のカスタムデータとイベントもコピーするかどうかをboolean型で指定します。 既定値はfalseで、データーとイベントは複製された要素にコピーされません。

Selector.clone( [withDataAndEvents] [, deepWithDataAndEvents]: boolean);

目次に戻る

サンプルコードと実行結果

ここではidCloneの識別子をもつdiv要素のコンテンツである、<button>original</button>を2つ複製します。 cloneメソッドで複製するにあたり、1つ目の複製には引数にfalseを与え、2つ目の複製には引数にtrueを与えてみました。 また、複製要素だと識別するためにボタンのラベルも"clone-false"と"clone-true"というぐあいに変更するようにしました。

コードが少し長めですので、実行結果に触れていただいてから細かな部分の説明を後術させていただきます。

サンプルコード: CSS
<style>
	#idClone button{
		margin: 5px 30px 5px 30px;
	}
	#idDataText{
		border: thin dashed currentColor;
		text-align: center;
		margin: 30px;
		padding: 10px;
	}
</style>
  • 03: マージン (ボタンどうしが接近しているとクリックしずらいので調整しています。)
サンプルコード: HTML
<head>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
	<div id="idClone">
		<button>original</button>
	</div>
	<div id="idDataText">
		<output></output>
	</div>
</body>
  • 05: div要素 (親要素)
  • 06: button要素 (子要素 / この要素のクローンを2つ作成します。)
  • 09: output要素 (カスタムデータの取得結果を表示するために使用します。)
サンプルコード: script
<script>
	$("#idClone button").data("myData","my-text");
	$("#idClone button").on("click",function(){
		window.alert("sample message");
	});
	$("#idClone").append(
		$("#idClone button").clone(false).text("clone-false")," ",
		$("#idClone button").clone(true).text("clone-true")
	);
	$("#idDataText output").html(
		"original: " + $("#idClone button:contains('original')").data("myData") + "<br>" +
		"clone-false: " + $("#idClone button:contains('clone-false')").data("myData") + "<br>" +
		"clone-true: " + $("#idClone button:contains('clone-true')").data("myData")
	);
</script>
  • 02: カスタムデータの追加 (idClone内のbutton要素に"myData"という名前のデータを追加します。データの内容は"my-text"というテキストです。)
  • 03: 関数の作成 (idClone内のbutton要素がクリックされたときに実行されます。)
  • 04: 関数の内容 (警告ダイアログを表示します。)
  • 06: コンテンツの追加 (idClone内の末尾に追加します。)
  • 07: 追加コンテンツの内容 (idClone内のbutton要素の複製を追加します。引数はfalse)
  • 08: 追加コンテンツの内容 (idClone内のbutton要素の複製を追加します。引数はtrue)
  • 10: カスタムデータの出力 (#idDataText内のoutput要素に出力します。)
  • 11: originalボタン (ボタンラベルが"original"の要素から"myData"というデータを取得します。)
  • 12: clone-falseボタン (ボタンラベルが"clone-false"の要素から"myData"というデータを取得します。)
  • 13: clone-trueボタン (ボタンラベルが"clone-true"の要素から"myData"というデータを取得します。)
実行結果:
各button要素に添付されているカスタムデータ
  • originalはbutton要素の原本です。
    この要素の複製を右隣りに2つ作成しました。
  • clone-falseは複製した要素です。
    引数はfalseなのでデータとイベントはコピーされていません。
  • clone-trueは複製した要素です。
    引数はtrueなのでデータとイベントもコピーされています。

originalをクリックするとアラートダイアログが表示されます。しかしclone-falseをクリックしてもダイアログは表示されません。 clone-trueはどうでしょうか? originalと同じようにダイアログが表示されますよね。つまり引数をtrueにすると登録されているイベントも 複製されるということです。 また、カスタムデータもoriginalとclone-trueには"my-text"というデータが添付されているのに、clone-falseはundefined(参照できない)となっています。

目次に戻る