jQueryオブジェクトや変数を同時に複数指定する方法

var $a = $('.a');
var $b = $('.b');

$a.css('backgroundColor', '#fff');
$b.css('backgroundColor', '#fff');

jQueryを書いていて「変数やjQueryオブジェクトを同時に複数指定したいが、上のように書くのは面倒…」ということが結構あると思います。

なので今回は複数のjQueryオブジェクトを指定する方法をいくつか紹介します。

方法1：セレクタで複数指定する
方法2：add()を使う
方法3：配列にして指定する
結局どれがいいの？

方法1：セレクタで複数指定する

$('.a, .b').css('backgroundColor', '#fff');

こんな感じで一度に複数のセレクタを指定することで、複数の要素に対して処理をかけることができます。
複数選択する場合は要素を全てクオーテーションの中に書き、カンマで区切ります。3つ以上でも大丈夫だし、IDセレクタや要素セレクタが混ざっていてもokです。

ただし、この方法だと要素を変数に入れた場合に処理ができません。

例えば以下のようなコードだと処理はできません。

var $a = $('.a');
var $b = $('.b');

$($a,$b).css('backgroundColor', '#fff');

複数のセレクタを指定する方法は、要素を変数に入れていない場合のみに限定されるので気をつけてください。

方法2：add()を使う

var $a = $('.a');
var $b = $('.b');

$a.add($b).css('backgroundColor', '#fff');

add()を使うことで複数の要素に対して処理をかける方法です。

ただこれにも問題があって、同時に指定したい要素が多すぎるとカオスになります。

var $a = $('.a');
var $b = $('.b');
var $c = $('.c');
var $d = $('.d');
var $e = $('.e');
var $f = $('.f');
var $g = $('.g');

$a.add($b).add($c).add($d).add($e).add($f).add($g).css('backgroundColor', '#fff');

こんなコードはさすがに嫌ですよね…

add()を使って複数選択する場合は2〜3個程度に留めておくようにしましょう。

方法3：配列にして指定する

var $a = $('.a');
var $b = $('.b');

$([$a[0], $b[0]]).css('backgroundColor', '#fff');

こんな感じで配列として処理してしまうことで複数の要素に同時に処理をかけることができます。

ただこの方法も問題があって、別に配列じゃないのに配列の書き方をしているとコード量が増えた時に絶対に混乱します。本当の配列と複数選択のために書かれた配列っぽいものがぱっと見見分けがつかないんですよね。

混乱の原因になるので、あまり使わないほうがいいかもしれません…

結局どれがいいの？

どれも一長一短という感じですが、個人的には$('.a, .b')というようにセレクタで複数選択する方法か、add()を使った方法がいいんじゃないかなと思います。

どうしてもたくさんの要素に同時に処理をかけたい場合は、

var $a = $('.a');
var $b = $('.b');
var $c = $('.c');
var $d = $('.d');
var $e = $('.e');
var $f = $('.f');
var $g = $('.g');

$a.add($b)
  .add($c)
  .add($d)
  .add($e)
  .add($f)
  .add($g)
  .css('backgroundColor', '#fff');

こんな感じのメソッドチェーンにしたほうがコードの見た目は良さそうです。

何か他にいい方法はないんでしょうかね…？

ZennでCSS設計の
本を書きました！