【jQuery】 filter()を使って要素をフィルタリングする!

要素をフィルタリングするにはjQueryのfilter()メソッドを使用します。

jQueryのfilter()メソッドとは指定した要素にフィルタリングするメソッドであり、特定の要素や条件を満たしている要素だけ変更したい場合などに使用されます。

例えば、divタグが2つある内、どちらか片方だけに処理を適用したい場合などにfilter()メソッドを使用することで、もう片方に処理が適用されないようフィルタリングすることができます。

また、filter()メソッドはfindメソッドと組み合わせることでも検索して取得した要素にフィルタリングすることができます。

今回は、jQueryのfilter()メソッドを使って要素をフィルタリングする方法について以下の内容で解説していきます。

⚫︎ 全体の要素をフィルタリングする場合
⚫︎ 特定の要素をフィルタリングする場合
⚫︎ 条件を満たす要素をフィルタリングする場合

⚫︎ find()を使って要素をフィルタリングする場合

ハルトさん

今回はjQueryのfilter()メソッドで要素をフィルタリングする方法について説明していきます。

さとみさん

はい!
お願いします!

filter()とは

filter()メソッドとは指定した要素にフィルタリングするメソッドとなります。

filter()の書き方

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

$の()に要素を指定し、filter()メソッドの引数にセレクタを指定して呼び出すことで、指定したセレクタにフィルタリングすることができ、引数に関数を指定して呼び出すことで、要素のインデックス番号が渡されます。

$の()の要素はタグ名や、クラス名、id名を指定します。

要素をフィルタリングするサンプルコード

filter()メソッドで要素をフィルタリングするサンプルコードを紹介します。

要素の全体をフィルタリングする場合

要素の全体をフィルタリングする場合はfilter()メソッドの引数に関数を指定します。

sample.html

style.css

index.js

出力結果

filter()メソッドによって、指定した要素内をフィルタリングしています。
そのため、ボタンを押すと、pタグで囲まれた全ての要素の透明度が変わっています。

特定の要素をフィルタリングする場合

特定の要素をフィルタリングする場合はfilter()メソッドの引数にセレクタを指定します。

sample.html

style.css

index.js

出力結果

filter()メソッドの引数んびセレクタ指定することで、指定したセレクタにフィルタリングをかけています。
そのため、pタグのbox1クラスの要素の透明度が変化しています。

さとみさん

filter()の引数は関数だけでなく、セレクタでも良いのですね!

ハルトさん

そうですね。
フィルタをかけたい要素が特定しているのならば、関数を指定するよりセレクタで指定した方が楽ですので今回はセレクタを使っています。

条件を満たす要素をフィルタリングする場合

条件を満たす要素をフィルタリングする場合はfilter()で指定する関数内に条件式を使用します。

sample.html

style.css

index.js

出力結果

filter()メソッドで指定する関数内に条件式を追記することで、条件を満たす要素にフィルタリングしています。
そのため、ボタンを押すと幅が70pxの要素の透明度が変わっています。

find()を使って要素をフィルタリングする場合

find()メソッドを使って要素をフィルタリングすることもできます。

sample.html

style.css

index.js

出力結果

filter()が指定する関数内にfind()メソッドを指定することで、検索した要素にフィルタリングをかけています。
そのため、find()メソッドで検索したbox1クラスの要素の背景色が変化しています。

find()メソッドについて詳しく知りたい場合はこちらをご参考ください。

さとみさん

filter()とfind()を使用することでも要素をフィルタリングをかけることができるんですね!

ハルトさん

そうですね。
find()で検索した要素にfilter()でフィルタリングをかけています。
find()は要素を検索した要素を取得するのでとても便利なメソッドです。

今回のポイント

filter()で要素をフィルタリング

⚫︎ 指定する要素にフィルタリングをかけるにはjQueryの要素にフィルタリングをかけるを使用する

⚫︎ filter()メソッドの引数には、セレクタか関数を指定する

⚫︎ filter()メソッドの引数に関数を指定すると、要素の全体にフィルタリングすることができる

⚫︎ filter()メソッドの引数にセレクタを指定すると、特定の要素にフィルタリングすることができる

⚫︎ filter()メソッドに条件式を使用すると、条件を満たす要素にフィルタリングすることができる

⚫︎ filter()メソッドとfind()メソッドを組み合わせて使用することでも、要素にフィルタリングすることができる

Writer
壷井

壷井

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

最新の案件情報

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