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

はじめに

jQuery で DOM 操作を行う際、複数の要素を同時に取得したい場面はよくあります。今回は、知っているとコードがスッキリする 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")

まとめ

同じ階層の複数要素を同時に選択したい場合は、セレクタ内でカンマ区切りすることでスマートに記述できます。チェーンが長い場合やセレクタが複雑な場合に活用すると、コードの重複を減らして可読性を高めることができます。