ID 名を持つ要素の clone 要素を複数作成する jQuery プラグイン

jQuery clone インスタンスを作成するプラグイン

このプラグインは、その名の通り、jQuery clone インスタンスを作成するものです。

ポップアップ要素を複数同時に表示させたい場合などに使用することを想定しています。

以下、アンダーライン部は補足説明ポップアップが設定してあります。

起動式は jQuery("#id").makeClone(n,target-jQuery-Instance,AfterOrBefore) で、これにより ID 名として idName を持つ要素の clone を n 個作成し、target jQuery インスタンスの後ろまたは前にまとめて配置します。

必要に応じてどの要素の前後にも clone を配置出来ます。但し、或る要素の中に配置する方法はここでは採用しませんでした。別途検討したいと思います。───願わくば、前後配置、内包配置、包含配置の全ての配置が可能なプラグインに出来ればと夢想しています。

特徴

1. clone 元要素は DOM ツリーのどこにあっても構いませんが、当然存在していなければなりません（苦笑）。
2. 一旦任意の数の clone 要素を作成した後に、異なる個数の clone を、異なる要素の前後に配置することも可能です。その場合以前に作成した clone 要素は全て削除され、改めて後で指定した数の clone 要素が、新しい対象要素の前後に配置されます。
3. 任意の要素の前後に、任意の数だけ clone 要素を配置出来ますが、同じ ID 名の要素を元とする clone 要素を、異なる要素の前後に配置する機能はありません。
4. 作成した clone 要素はその定義から元要素の属性を全て引き継ぎます。例えば、元要素が display:'none' となっていれば、作成された clone 要素も一切描画されませんし、絶対配置されている ID 名の要素の clone は絶対配置となります。しかし、このプラグインの返値を clones jQery インスタンスにしたので、作成後に jQuery メソッドチェーンを利用して、自由に属性を変更出来ます。
5. clone 要素の ID 名は元要素の ID 名に番号を付加したものとしました。（例）元要素の ID 名："animPopup" → clone 要素の ID 名："animPopup1"、"animPopup2"、・・・
6. clone 元要素に子要素があって（孫要素は対象外）、それにも ID 名が存在した場合、clone 要素の子要素の ID 名も、子要素の ID 名 ＋番号 となるようにしました。
7. clone 要素を第二引数の前または後の、いずれに配置するかを第三引数で指定します。無指定の場合には後ろに配置します。
8. 前又は後の配置対象となる要素には ID が振られている必要はありません。任意のしかし１つの要素だけを指定出来ます。

コード

  1:(function($){
  2:$.fn.makeClone = function(n,$target,AfterOrBefore){
  3:/* ID 名として idName を持つ要素の clone を n 個作るメソッド
  4: * 当該メソッドの起動元インスタンスは clone 元要素で ID 名付きで指定する。
  5: * 一旦 clone を作成後に、n を増やしたい場合にも、重複作成はしないよう
  6: * コーディングしてあるので、単純に n を指定すればよい。
  7: * なお、作成した clone 要素をどこに挿入するかは別問題であり、挿入用の
  8: * コーディングが別途必要となる。
  9: * release:2010/11/14
 10: */
 11:	var errFunc=function(al){al!==undefined && alert(al);return false;};
 12:	if (n===undefined) errFunc("引数が指定されていません。\n作成する clone の数を
            正の整数で指定してください。\n0 を指定すると作成済みの clone を削除します。");
 13:	if ($target && !$target.jquery) errFunc("第二引数は clone を配置する前、
            または後ろの jQuery インスタンスを指定してください。");
 14:	if (AfterOrBefore && typeof AfterOrBefore!=="boolean")
          errFunc("第三引数は、trueか fault を指定してください。\ntrue は第二引数の
          後ろに、false は前に clone を配置することを意味します。\n指定しない場合には
          true 扱いとなり後ろに配置するよう設計しました。");
 15:    if (n && (!$target || $target.length===0 || $target.length >1))
          errFunc("第二引数が適切ではありません。指定し直してください。\n
          複数の要素を指し示す指定は出来ませんし、n がゼロの時以外は無指定も
          出来ません。");
 16:
 17:	// 起動元インスタンスは必ず $("#id") 形式とする
 18:	var clones=[], $tmp, i=1, k=1, id = this.attr("id");
 19:	if (!$("#"+id).length)
 20:		return errFunc("その ID 名の要素は存在しません。");
 21:	var setClone = function(){
 22:		for (;$tmp=$("#"+id +i),$tmp.size();i++) $tmp.remove();
 23:		for (;k<n+1;k++){
 24:			clones[k-1] = $("#"+id).clone().attr("id",id +k);
 25:			var $c = clones[k-1].children(":[id]");
 26:			if ($c.size()){
 27:				$c.each(function(){
 28:					$(this).attr("id", $(this).attr("id")+k);
 29:				});
 30:			}
 31:		}
 32:		return $(clones);
 33:	}
 34:	return (AfterOrBefore===undefined || AfterOrBefore) ?
          setClone().insertAfter($target) : setClone().insertBefore($target);
 35:};
 36:})(jQuery);

サンプル

頁内に存在する ID 名「popup」要素の clone を、下のボタン直下に 5 つ作る

makeClone(5,$("#btn791-1").parent())

頁内に存在する ID 名「popup」要素の clone を、この直下、ボタンの上に 3 つ作る

makeClone(3,$("#btn791-1").parent(),false)

これらのサンプルでは、結果を見せるために元要素の CSS 設定をいくつか変更しました。例えば、position は "relative" に、display は "block" に変えています。幅も自動的に width:100% となっています。

作成苦労談

作 成 中