何かいっつも忘れるのでメモ。
jQueryオブジェクトを変数化した方が後々使いまわせて良いし、何より処理速度も僅かながら早くなるのだけど、例えば変数化したjQueryオブジェクトAとBに同時にある処理を加えたい時どうするかと言う問題。やり方はいくらでもあるのだけど、スマートな方法を覚えなければ！
今回の例ではid='el1'とid='el2'の要素を対象とし、それらを同時にshow()で表示させると言う処理。
var $el1 = $('#el1'),$el2 = $('#el2');
//後々変数を使う事が無ければ以下でも良いが...
$('#el1,#el2').show();
//普通に記述すると.show()を2回記述する事になる。
$el1.show(300,function(){});
$el1.show(300,function(){});
//1 .addで追加する場合
$el1.add($el2).show(300,function(){});
//2 DOMオブジェクト化した物を配列化し、jQueryオブジェクトにする
$([$el1[0],$el2[0]]).show(300,function(){});
//3 $.mergeで配列化する場合
$.merge($el1,$el2).show(300,function(){});
// 注)この場合$el1が上書き(配列)されている事に注意する事
2が一番スマートかな、可読性に優れて解りやすい。要素が存在するかどうかって判別にもDOMオブジェクト化はよく使うしね。3の方が解りやすそうな記述ではあるのだが、$el1が配列として上書きされてしまうので、後々$el1だけに処理を記述した時に$el2にも処理が適用されてしまうと言う恐怖。
1はよく見る記述だけど、これが更に複数だったら.add().add().add()とかになるのは流石にダサい。
しかしながら$.mergeも.add()も配列としてリターン出来る訳だから使い所次第的な感じでもある。
