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

2014.11.12 JS / jQuery

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

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

<div style="border: dashed 10px #ccc; padding:10px;">
	<h1>mergeで結合して一緒に</h1>
	<div id="b1" class="block">id="b1"</div>	
	<div id="b2" class="block">id="b2"</div>	
</div>

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

ここから解説!

個別に書く

	 	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('←変わった');

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

addで一緒に処理するデモ

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

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

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

	 	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('←変わった');

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をうわがき');

$.merge()で合体させて処理したから上書きされるデモ

テキストが変わってしまいます…これは使わないほうがいいですね~。

 


 

以上です

 

でわ!

Profile

東京でWebデザイナー・コーダーとして、フロントエンド的なことからデザイン思考的なことを考えたりして、ごにょごにょと活動中。(ポートフォリオ)Webクリエイターでは珍しい(?) HIPHOP, R&B好き。休日はよくカフェや漫画喫茶に出向いたりパン屋に行ったりコーヒ豆買いに行ったり、主に散歩しています。。デザインのトレンドやデザイン思考、HTML、CSSからSASS、Javascript、Wordpress構築などコーディングのTIPSなどをブログにアップしていきます。その他のことはtwitter( @satohmsys )まで。コーヒー友達募集中。