【jQuery】is()を使って条件にあった場合に処理を行う!

条件にあった場合に処理を行うにはjQueryのis()メソッドを使用します。

jQueryのis()とは要素が指定したセレクタと一致する、または指定した関数等の条件を満たしている場合にtrueを返すメソッドである為、「is().css(“background, red”)」ようにメソッドの後ろに書くのではなく、if文やeach()メソッドなどで使用しましょう。

また、is()メソッドのパラメータにはセレクタ、jQueryオブジェクト、関数、要素を指定できます。

今回は、jQueryのis()メソッドを使って条件にあった場合に処理を行う方法について以下の内容で解説していきます。

⚫︎ is()を使用する際の注意点

⚫︎ 条件にセレクタを設定して処理を行う場合
⚫︎ 条件に関数を設定して処理を行う場合
⚫︎ 条件にjQueryオブジェクを設定して処理を行う場合
⚫︎ 条件に要素を設定して処理を行う場合

ハルトさん

今回はjQueryのis()メソッドで条件にあった場合に処理を行う方法について説明していきます。

さとみさん

はい!
お願いします!

is()とは

is()とは要素が指定したセレクタと一致する、または指定した関数等の条件を満たしている場合にtrueを返すメソッドとなります。

is()の書き方

is()の書き方は下記となります。

パラメータ

⚫︎ 条件:
処理に合わせた条件を指定する
(条件はセレクタや関数、jQueryオブジェクト、要素を指定することができる)

is()メソッドを指定して呼び出すことで、$の()で指定したセレクタの要素を複製することができます。

そして、パラメータに要素のイベントハンドラを真偽値で指定して呼び出すことで、要素のイベントハンドラまで複製することができ、子要素のイベントハンドラを真偽値で呼び出すことで子要素のイベントハンドラまで複製することができます。

is()を使用する際の注意点

is()はメソッドですが、戻り値はBooleanになるので、下記のようにis()メソッドの後に続けてメソッドを書く事はできません。

is()のNGな使用例

例えば、text()メソッドやhtml()メソッドなど普段、使用しているメソッドは指定した値を返すので、メソッドの後ろに続けて追記することができます。
それに比べて、is()メソッドは真偽値を返すようになりますのでis()メソッドで条件にあった場合に処理を行うにはif文やeach()メソッドなどを使用しましょう。

条件にあった場合に処理を行うサンプルコード

is()で条件にあった場合に処理を行うサンプルコードを紹介します。

条件にセレクタを設定して処理を行う場合

is()の条件にセレクタを設定して処理を行ってみます。

sample.html

index.js

出力結果

is()メソッドのパラメータにセレクタを設定して、条件にあった場合に処理を行っています。
そのため、btn1のボタンを押すと選択されたラジオボタンが大きくなり、btn2のボタンを押すとチェック済みのチェックボックスが大きくなります。

条件に関数を設定して処理を行う場合

is()の条件に関数を設定して処理を行ってみます。

sample.html

style.css

index.js

出力結果

is()メソッドのパラメータに関数を指定して、指定した関数の結果を真偽値で返すようになります。

その為、btn1クラスのボタンを押すとisObj1クラスの要素の背景色が変更されませんが、isObj2クラスの背景色が青色になってから、btn1クラスのボタンを押すとisObj1クラスの要素の背景色が変更されるようになります。

さとみさん

is()メソッドのパラメータに関数を指定することで条件にあった場合に処理を行うことができるんですね!

ハルトさん

そうですね。
is()メソッドのパタメータに関数を使用すると、関数の戻り値がtrueがfalseになります。
その為、関数の戻り値には真偽値が返ってくるように設定しなければなりません。

条件にjQueryオブジェクトを設定して処理を行う場合

is()の条件にjQueryオブジェクを設定して処理を行ってみます。

sample.html

style.css

index.js

出力結果

is()メソッドのパラメータにjQueryオブジェクトを設定して、条件にあった場合に処理を行っています。

そのため、btn1のボタンを押すと何も変化はありませんが、btn2のボタンを押すとisObj2クラス要素の背景色が変化します。
そして、btn2のボタンを押した後にbtn1のボタンを押すとisObj1クラスの背景色が変化します。

条件に要素を設定して処理を行う場合

is()の条件に要素を設定して処理を行ってみます。

sample.html

index.js

出力結果

is()メソッドのパラメータに要素を指定することで、条件が合う場合に処理を行うことができます。
そのため、div要素の中にある要素をクリックするとli要素とh3要素とp要素の背景色が変更されます。

今回のポイント

is()を使って条件に合う処理を行う

⚫︎ 条件にあった場合に処理を行うにはjQueryのis()メソッドを使用する

⚫︎ is()メソッドは条件にあった場合はtrueを条件に合わなかった場合にはfalseの真偽値を返すメソッドである
(値を返すメソッドではない為、普段のメソッドのようにis()メソッドの後ろにコードを書いても動かない)

⚫︎ is()メソッドのパラメータにはセレクタ、jQueryオブジェクト、関数、要素を指定できる

関連記事

jQueryのfind()メソッドで指定した要素を検索する方法についてはこちらをご参考ください。

jQueryのfilter()で要素をフィルタリングする方法についてはこちらをご参考ください。

jQueryのhas()で指定した要素を持つ場合に処理する方法についてはこちらをご参考ください。

Writer
壷井

壷井

株式会社flyhawkの壷井です。フライテックメディア事業部でのメディア運営・ライター業務なども担当。愛機はMac Book AirとThinkPad。好きな言語:swift、JS系(Node.js等)。好きなサーバー:AWS。受託開発やプログラミングスクールの運営をしております。ご気軽にお問い合わせください。

最新の案件情報

フリーランスエンジニアの案件探し