【jQuery】not()を使って指定した要素以外を対象にする!

指定した要素以外を対象にするにはjQueryのnot()メソッドを使用します。

jQueryのnot()メソッドとはマッチした要素から指定したセレクターや条件を満たす要素を除外するメソッドであり、セレクタで指定した要素以外の要素を指定することができます。

また、not()メソッドは普段のセレクタの指定と同様に単数や複数の要素を指定することができたり、関数を指定することで「Aの時はdivAクラスを除外し、それ以外の場合はdivBクラスを除外する」というように条件次第で除外するメソッドを指定することができます。

今回は、jQueryのnot()メソッドを使って指定した要素以外を対象にする方法について以下の内容で解説していきます。

⚫︎ 指定した単数の要素以外を対象にする場合
⚫︎ 指定した複数の要素以外を対象にする場合
⚫︎ 条件を設定して指定した要素以外を対象にする場合

⚫︎ セレクタにnot()を直接指定する場合

ハルトさん

今回はjQueryのnot()メソッドで指定した要素以外を対象にする方法について説明していきます。

さとみさん

お願いします!

not()とは

not()とは、マッチした要素から指定したセレクターや条件を満たす要素を除外するメソッドとなります。

not()の書き方

not()メソッドの書き方は下記となります。

パラメータ

⚫︎ 除外したい要素:
除外したい要素を指定する
(セレクタ、DOM要素、jQueryオブジェクトでも指定できる)
⚫︎ 関数:
除外する要素を関数で指定する

not()メソッドのパラメータに除外したい要素を指定することで指定した要素以外を対象にすることができます。
また、パラメータに関数を指定すると、戻り値として除外したい要素を指定することができます。

指定した要素以外を対象にするサンプルコード

not()で要素にイベントの解除を行うサンプルコードを紹介します。

指定した単数の要素以外を対象にする場合

指定した単数の要素以外を対象にする場合はnot()のパラメータに要素を指定します。

sample.html

style.css

index.js

出力結果

not()のパラメータに除外したい要素を指定することで指定した要素以外を対象にすることができます。
そのため、ボタンを押すと、sample2クラスとsample3クラスの要素の背景色が変化します。

指定した複数の要素以外を対象にする場合

not()で要素に複数のイベントの解除を行う場合はパラメータに除外したい要素を「,(カンマ)」 で区切って指定します。

sample.html

style.css

index.js

出力結果

not()のパラメータに除外したい要素をカンマで区切って指定することで指定した要素以外を対象にすることができます。
そのため、ボタンを押すと、sample3クラス要素の背景色が変化します。

条件を設定して指定した要素以外を対象にする場合

条件を設定して指定した要素以外を対象にする場合はnot()のパラメータに関数を指定します。

sample.html

style.css

index.js

出力結果

not()のパラメータに関数を指定することで条件を設定して指定した要素以外を対象にすることができます。
そのため、btnBボタンとbtnAボタンを押すことで指定した要素以外の対象を変えています。

さとみさん

not()メソッドのパラメータに関数を指定することで、指定した要素以外の対象を変更できるんですね!

ハルトさん

そうですね。
サンプルコードでは条件によってnot()メソッドのパラメータで指定した関数の戻り値を変えています。

セレクタにnot()を直接指定する場合

not()メソッドはセレクタに直接指定することができます。
その為、:not()とnot()でどのように変わるのか比較を行っていきます。

sample.html

style.css

index.js

出力結果

:not()とnot()で指定した要素以外を対象にしましたが、not()と同じような使い方ができます。

今回のポイント

not()で要素のイベントを解除

⚫︎ 指定した要素以外を対象にするにはjQueryのnot()メソッドを使用する

⚫︎ not()で要素に単数のイベントを解除する場合はnot()メソッドのパラメータに除外したい要素を指定する

⚫︎ not()で要素に複数のイベントを解除する場合はnot()メソッドのパラメータに除外したい要素をカンマで区切って指定する

⚫︎ not()で特定要素のイベントの解除を行う場合は第2パラメータにセレクタを指定する

⚫︎ セレクタに直接指定する:not()はnot()メソッドと同じような使い方ができる

関連記事

jQueryのbind()メソッドで要素にイベントを紐づける方法についてはこちらをご参考ください。

jQueryのon()メソッドで要素のイベントを設定する方法についてはこちらをご参考ください。

Writer
壷井

壷井

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

最新の案件情報

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