【jQuery】 複数条件をまとめて指定するスマートな書き方

jQuery で複数条件をまとめて指定するスマートな書き方

こんにちは。今回は jQuery の複数条件指定 について、「知っているとコードがスッキリする」小ネタを紹介します。

よくある書き方

たとえば、特定のルート要素内にある .form-group の直下の input と select を両方取得したい場合、つい次のように別々に書いてしまいがちです。

$(jquery_body).children(".form-group").children("input")
$(jquery_body).children(".form-group").children("select")

しかし、このように書いてしまうと今回であれば「.form-group」の箇所が冗長になってしまい、変更に弱く可読性も低いです。

よりスマートな書き方

実は、jQuery のセレクタはカンマ区切りで複数指定することができます。
この機能を利用することで、上記コードの冗長な個所を排除しより以下のようにスマートに記述することができます。

$(jquery_body).children(".form-group").children("input, select")

このように、同じ階層にある複数の要素を同時に指定したい場合は引数として渡す文字列内の要素をカンマでつなぐことによって実現することができます。

おまけ

こちらは今回の状況では活躍しませんでしたが、上記と似た書き方で同じ処理を以下のように記載することもできます。

$(jquery_body)
  .children(".form-group")
  .children("input")
  .add($(jquery_body).children(".form-group").children("select"));

$(".form-group input, .form-group select, .form-group textarea")

まとめ

同じ階層の複数要素を同時に選択したい場合は、文字列内でカンマ区切りすることによってスマートに選択できます。