Jcropを使う要素は複製されるのでクエリの書き方に注意

jqueryプラグインのJcropを使うとIMG要素の画像を切り抜き（クロップ）できるので便利。

使い方は別のサイトにお任せするとしてハマった点をメモ。

$(query).Jcrop()とすると、queryにマッチした要素は最初のJcropの呼び出し時にコピーされ、コピー先の要素ではid属性は削除される。そして2回目以降はコピーされない。

で、結論から言うと、queryにid以外を使う場合は最初にクエリを投げてその結果を使いまわすようにする必要がある。たとえばこういうこと:

var i = 3;
var $foo = $(".foo")
while(i-- > 0) { $foo.Jcrop() }

なぜかというと、

var i = 3;
while(i-- > 0) { $(".foo").Jcrop() }

と書いた場合、次のようにコピーが3回行われることになるため:

// 1回目
// もともとあった`.foo`がコピーされる。このときクラス指定は削除されない。
$(".foo").Jcrop();

// 2回目
// もともとあった`.foo`はコピーされない。
// ただし1回目のコピー先の`.foo`自身はまだコピーされたことがないので、コピーされる。
$(".foo").Jcrop();

// 3回目
// もともとあった`.foo`と`、1回目でコピー先となった`.foo`はコピーされず、
// 2回目でコピー先となった`.foo`が初めてコピーされる。
$(".foo").Jcrop();

これはクラス指定でなくても発生する。

queryがidによるものであれば、コピー先からidが削除されているのでこのような多重コピーは発生しない。

Jcropを1回しか呼ばないような場合には問題にならないけど、逐次Jcropのオプションを更新するような場合などには確実に無駄な要素が生成されて重くなるので要注意。