【jQuery】find()を使って指定した要素を検索する!

指定した要素を検索するにはjQueryのfind()メソッドを使用します。

jQueryのfind()メソッドとはHTML要素を検索するメソッドとなります。
find()メソッドは、入れ子になっているHTMLの要素を簡単に検索して指定することができ、引数に探したい要素を指定することで、要素を単数で検索したり、複数で検索することができます。

今回は、jQueryのfind()メソッドを使って要素を検索する方法について以下の内容で解説していきます。

⚫︎ 指定した単数の要素を検索する場合
⚫︎ 指定した単数の要素を検索する場合
⚫︎ 指定した要素が見当たらない場合

⚫︎ 指定した複数の要素を取得する場合
⚫︎ find()メソッドの検索範囲

ハルトさん

今回はjQueryのfind()メソッドで指定する要素を検索する方法について説明していきます。

さとみさん

お願いします!

find()とは

find()とは、HTML要素を検索するメソッドとなります。

find()の書き方

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

$の()に要素を指定し、find()の引数に検索したい要素を指定することで、要素の中にある探したい要素を検索することができます。

指定する要素は<div>のようなタグ名やクラス名、id名でも構いません。

指定した要素を検索するサンプルコード

指定した要素を検索するサンプルコードを紹介します。

指定した単数の要素を検索する場合

指定した単数の要素を検索する場合はfind()の引数に探したい要素を文字列として指定します。

sample.html

index.js

出力結果

find()メソッドの引数に探したい要素を文字列として指定することで単数の要素を検索することができます。
そのため、ボタンを押すと、指定したimpクラスの要素の背景色が変わっています。

指定した複数の要素を検索する場合

指定した複数の要素を検索する場合はfind()メソッドの引数に探したい要素を,(カンマ)で区切り、文字列として指定します。

sample.html

index.js

出力結果

find()メソッドの引数に探したい要素を,(カンマ)で区切り、文字列として指定することで複数の要素を検索することができます。
そのため、ボタンを押すと、指定したimp1クラスとimp2クラスの要素の背景色が変わっています。

指定した要素が見当たらない場合

指定した要素が見当たらない場合にfind()メソッドを使用してみます。

sample.html

index.js

出力結果

指定した要素が見当たらない場合にfind()メソッドを使用すると、対象外になります。
その為、ボタンを押すと、何も起きません。

指定した複数の要素を取得する場合

指定した複数の要素を取得する場合はeach()メソッドを使用します。

each()メソッドは繰り返し処理を行うメソッドです。

sample.html

index.js

出力結果

さとみさん

each()とfind()を組み合わせて使用することで、複数の要素を取得することができるのですね!

ハルトさん

そうですね。
find()で要素を検索し、each()で検索した要素に対して繰り返し処理を行うことができます。

find()メソッドの検索範囲

find()メソッドの検索範囲について紹介していきます。
まず、find()メソッドとchildren()メソッドで同じ要素を取得してみます。

sample.html

index.js

出力結果

結果としては同じですが、意味てほしいのは$で指定している要素が異なるいうことです。
children()メソッドの場合は、指定したい要素の一つ上であるtrタグを指定していますが、find()メソッドはテーブル全体のタグであるtableタグを指定しています。

このことから、find()メソッドはchildren()メソッドと比べて、検索範囲がとても広いことがわかります。

さとみさん

children()だと、指定した要素との位置関係を意識しなければなりませんでしたが、
find()を使用すると階層が一番上のタグからでも検索したい要素を指定してくれるのでとても便利ですね!

ハルトさん

そうですよね。
親子の要素の位置関係を意識して要素を指定しなければならないchildren()に対して、find()はタグの中に要素があるならどこから指定しても検索したい要素を指定することができます。
これがfind()の検索範囲の広さになります。

今回のポイント

find()メソッドで要素を検索する

⚫︎ 要素を検索するにはjQueryのfind()メソッドを使用する

⚫︎ 指定した単数の要素を検索する場合はfind()の引数に探したい要素を文字列として指定する

⚫︎ 指定した複数の要素を検索する場合はfind()メソッドの引数に探したい要素を,(カンマ)で区切り、文字列として指定する

⚫︎ 指定した要素が見当たらない場合にfind()メソッドを使用すると、対象外になる

⚫︎ each()メソッドとfind()メソッドを組み合わせて使用することで、指定した複数の要素を取得することができる

⚫︎ find()メソッドはchildren()メソッドと比べて、検索範囲がとても広い

Writer
壷井

壷井

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

最新の案件情報

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