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

2014.11.12 JS / jQuery

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

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

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

ここから解説!

個別に書く

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

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

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

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

addで一緒に処理するデモ

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

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

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

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

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

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

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

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

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

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

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

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

 


 

以上です

 

でわ!

Profile

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