【jQuery】複数の変数に同時に処理をする方法

cssでなら複数のクラスに同じスタイルを適用するのはとても簡単ですが、じゃあjQueryで変数（ｊQueryオブジェクト）を作った場合、複数のそれらに同時に処理を適用するにはどうしたらいいのか。

これがcssと同じようには行かないのです。
最近知ったいくつかの方法をまとめました！
まず、ベースとなるHTML

 &lt;div style=”border: dashed 10px #ccc; padding:10px;”&gt;  	&lt;h1&gt;mergeで結合して一緒に&lt;/h1&gt;  	&lt;div id=”b1″ class=”block”&gt;id=”b1″&lt;/div&gt;	  	&lt;div id=”b2″ class=”block”&gt;id=”b2″&lt;/div&gt;	  &lt;/div&gt;

<h1>mergeで結合して一緒に</h1>

</div>

わかりやすくするための適用cssは割愛します。

ここから解説！

個別に書く

 	 	var b1 = $(‘#b1’);  	 	var b2 = $(‘#b2’);    	 	b1.css({  	 		‘border’ : ‘ double 10px #add’  	 	}).append(‘←変わった’);  	 	b2.css({  	 		‘border’ : ‘double 10px #dda’  	 	}).append(‘←変わった’);

var b1 = $(‘#b1’);

var b2 = $(‘#b2’);

b1.css({

‘border’ : ‘ double 10px #add’

}).append(‘←変わった’);

b2.css({

‘border’ : ‘double 10px #dda’

}).append(‘←変わった’);

個別に書いてそれぞれ処理するデモ

解りやすいかもしれませんが、いかんせんスマートでないですね…

add()を使って一緒に処理する

 	 	var b1 = $(‘#b1’);  	 	var b2 = $(‘#b2’);    	 	b1.add(b2).css({  	 		‘border’ : ‘ double 10px #add’  	 	}).append(‘←変わった’);

var b1 = $(‘#b1’);

var b2 = $(‘#b2’);

b1.add(b2).css({

‘border’ : ‘ double 10px #add’

}).append(‘←変わった’);

.add() | jQuery 1.9 日本語リファレンス | js STUDIO

addで一緒に処理するデモ

変数b1にb2を追加して一緒に処理します。
じゃあこの後にb1に何か処理を加えたらb2も変更されるのでは…？

その心配はありません。.add()で追加され生成されたオブジェクトは処理が終わったら破棄されるらしいです。

配列にして一緒に処理する

 	 	var b1 = $(‘#b1’);  	 	var b2 = $(‘#b2’);    	 	$([b1[0] , b2[0]]).css({  	 		‘border’ : ‘ double 10px #add’  	 	}).append(‘←変わった’);    	 });

var b1 = $(‘#b1’);

var b2 = $(‘#b2’);

$([b1[0] , b2[0]]).css({

‘border’ : ‘ double 10px #add’

}).append(‘←変わった’);

});

配列にして一緒に処理するデモ

$([b1[0] , b2[0]])のところで配列としてまとめてしまってます。

$.merge()で合体させて処理する

 	 	var b1 = $(‘#b1’);  	 	var b2 = $(‘#b2’);    	 	$.merge(b1,b2).css({  	 		‘border’ : ‘ double 10px #add’  	 	}).append(‘←変わった’);

var b1 = $(‘#b1’);

var b2 = $(‘#b2’);

$.merge(b1,b2).css({

‘border’ : ‘ double 10px #add’

}).append(‘←変わった’);

jQuery.merge(first, second) – jQuery API 1.4.4 日本語リファレンス – StackTrace

$.merge()で合体させて処理するデモ

破壊的メソッドです。どっかのアニメではありません。

b1にb2を結合してオブジェクトを生成します。
add()と違ってこのあとに変数b1に処理をしてみると…

 	 	var b1 = $(‘#b1’);  	 	var b2 = $(‘#b2’);    	 	$.merge(b1,b2).css({  	 		‘border’ : ‘ double 10px #add’  	 	}).append(‘←変わった’);    	 	b1.text(‘変数b1をうわがき’);