【jQuery】find()で指定した要素の検索を行う!

エンジニアに特化した転職エージェント!

・IT/Web系エンジニアの経験者の方
・どこの転職エージェントを利用しようか迷っている方

それなら、キッカケエージェントにご相談!

キッカケエージェントでは、少数精鋭のエージェントが、エンジニアの経験やスキル、志向性などをカウンセリングし、的確なアドバイスを提供します!

また、徹底した企業へのヒアリングにより、最適なマッチングを実現し、今では内定率が一般的なエージェントの2倍以上となっています!

転職エージェントに迷っている方、まずは無料でキャリア相談から!




(この記事は2023年09月07日に投稿されました。)

jQueryで指定した要素の検索を行うにはfind()を使用します。

find()とは、指定した要素の子要素を特定することができるメソッドになります。

検索して見つかった場合はマッチした要素をセレクタとして取得し、見つからなかった場合はセレクタとして取得しなくなります。

そして、find()は複数マッチした場合でも全てセレクタとして取得するので、利便性はとても高いです。

また、find()は他のメソッドと組み合わせて使用することでより高度な要素の検索を行うことができます。

DOMツリーの中から特定したい要素を取得できるため、指定した要素の検索を行いたい場合はfind()を使用しましょう。

今回は、jQueryのfind()で指定した要素の検索を行う方法について紹介していきます。

この記事はこんな方におすすめ

指定した要素を検索してセレクタとして取得したい場合

入り口を狭くして、セレクタとして取得するための要素を取得したい場合

find()とは

find()とは、指定した要素の子要素を特定することができるメソッドになります。

マッチしているセレクタの中からさらに特定の要素をセレクタとして取得することができます。

find()の書き方

find()の書き方は下記のようになります。

セレクタの後ろにfind()と追記し、引数を1つ指定して使用します。

find()の引数

find()の引数は下記のようになります。

  1. 子セレクタ:(必須)
    検索したい子要素をセレクタで指定する

find()は必須な引数として「子セレクタ」を指定します。

find()で指定した要素の検索を行うサンプルコード

find()で指定した要素の検索を行うサンプルコードをご紹介します。

ここでは、下記の3ケースでfind()を使用します。

  1. 検索する要素が存在する場合
  2. 検索する要素が存在しない場合
  3. 検索する要素が複数存在する場合

検索する要素が存在する場合

検索する要素が存在する場合にfind()を使用すると、マッチした要素がセレクタとなります。

● index.html

● style.css

● main.js

実行結果

検索する要素が存在する場合にfind()で要素の検索を行った結果

find()によって指定した要素の検索を行っています。

そのため、ボタンをクリックすると、「obj-2」クラスの要素の色が変化しています。

検索する要素が存在しない場合

検索する要素が存在しない場合にfind()を使用すると、セレクタの取得はできません。

● index.html

● style.css

● main.js

実行結果

検索する要素が存在しない場合にfind()で要素の検索を行った結果

find()によって指定した要素の検索を行っています。

今回は「obj-8」クラスの要素を検索していますが、存在しないためボタンをクリックしても何も起きません。

検索する要素が複数存在する場合

検索する要素が複数存在する場合にfind()を使用すると、マッチした全ての要素をセレクタとして取得します。

● index.html

● style.css

● main.js

実行結果

検索する要素が複数存在する場合にfind()で要素の検索を行った結果

find()によって指定した要素の検索を行っています。

そのため、ボタンをクリックすると、「obj-2」クラスを持つ2つの要素の色が変化しています。

find()で複数の要素を指定して検索を行う場合

find()で複数の要素を指定して検索を行うには引数である子セレクタをカンマで区切って指定します。

どれかのクラス、もしくは全てのクラスを持っている要素であるなら全て、セレクタとして取得することができます。

● index.html

● style.css

● main.js

実行結果

find()に指定した複数の要素の検索を行った結果

find()によって指定した複数の要素の検索を行っています。

そのため、ボタンをクリックすると、2つの「obj-1」クラスと「obj-4」クラスの要素の色が変化しています。

find()で検索した複数の要素にそれぞれ別の処理を行う場合

find()で検索した複数の要素にそれぞれ別の処理を行うにはeach()と組み合わせて使用します。

each()とは、オブジェクトに対して繰り返しを行うメソッドになります。

そのため、find()とeach()を組み合わせて使用することで、検索した複数の要素にそれぞれ別の処理を行うことができます。

● index.html

● style.css

● main.js

実行結果

find()とeach()で検索した複数の要素にそれぞれ別の処理を行った結果

find()とeach()によって検索した複数の要素にそれぞれ別の処理を行っています。

そのため、ボタンをクリックすると、「obj-1」クラス、「obj-2」クラス、「obj-3」クラス、「obj-4」クラスの要素の色がそれぞれ違う色に変化しています。

find()で指定した要素の親族要素を検索する方法

find()で指定した要素の親族要素を検索する方法についてご紹介します。

ここでは、下記の3つの親族要素をfind()で検索します。

  1. いとこ要素を検索する場合
  2. 甥姪要素を検索する場合
  3. 子孫要素を検索する場合

いとこ要素を検索する場合

いとこ要素を検索する場合は、parents()で取得したセレクタに対してfind()を使用します。

parents()とは、指定した要素より上の要素をセレクタとしてすべて取得するメソッドになります。

そのため、parents()で祖先要素を取得し、そこからfind()を使用することでいとこ要素を検索することが可能になります。

● index.html

● style.css

● main.js

実行結果

find()でいとこ要素の検索を行った結果

find()によっていとこ要素の検索を行っています。

そのため、ボタンをクリックすると、「obj-2」クラスの要素の色が変化しています。

甥姪要素を検索する場合

甥姪要素を検索する場合は、siblings()で取得したセレクタに対してfind()を使用します。

siblings()とは、指定した要素の兄弟要素をセレクタとして取得するメソッドになります。

そのため、siblings()で兄弟要素を取得し、そこからfind()を使用することで甥姪要素を検索することが可能になります。

● index.html

● style.css

● main.js

実行結果

find()で甥姪要素の検索を行った結果

find()によって甥姪要素の検索を行っています。

そのため、ボタンをクリックすると、「obj-1-1」クラスと「obj-3-2」クラスの要素の色が変化しています。

子孫要素を検索する場合

子孫要素を検索する場合は、、children()で取得したセレクタに対してfind()を使用します。

children()とは、指定した要素の子要素をセレクタとして取得するメソッドになります。

そのため、children()で子要素を取得し、そこからfind()を使用することで子孫要素を検索することが可能になります。

● index.html

● style.css

● main.js

実行結果

find()で子孫要素の検索を行った結果

find()によって子孫要素の検索を行っています。

そのため、ボタンをクリックすると、「obj-1-1」クラスの要素の色が変化しています。

find()で高度な検索を行う方法

先ほどまで、find()を使って要素を検索していましたが、他のメソッドと組み合わせて使用することで複雑な条件で要素の検索を行うことができます。

そのため、ここではfind()で高度な検索を行う方法についてご紹介します。

厳密なフィルタリングを行って検索を行う場合

find()で厳密なフィルタリングを行って検索を行う場合は、find()を連続して使用します。

find()を連続して使用することで、検索した要素から要素のように範囲を狭く深くすることができます。

● index.html

● style.css

● main.js

実行結果

find()を連続で使用して厳密なフィルタリングの検索を行った結果

find()を連続で使用して、厳密なフィルタリングの検索を行っています。

今回はremoveClass()を使用して色が変化するクラスを取り除いています。

そのため、ボタンをクリックすると「obj-1-1-1」クラスと「obj-1-2」のクラス要素の色が変化しています。

もし、removeClass()について詳しく知りたい場合は下記の記事をご参考ください。

否定条件を使用して検索を行う場合

find()で否定条件を使用して検索を行う場合はnot()を使用します。

not()とは条件を満たす要素を除外するメソッドとなります。

そのため、find()と組み合わせて使用することで否定条件を使用して検索を行うことができます。

● index.html

● style.css

● main.js

実行結果

find()とnot()で否定条件を使用して検索を行った結果

find()とnot()を使用して、否定条件を使用して検索を行っています。

今回はtoggleClass()を使用して色が変化するクラスを切り替えています。

そのため、ボタンをクリックすると「obj-2」クラスの要素の色が交互に変化しています。

所持している要素を指定して検索を行う場合

find()で所持している要素を指定して検索を行う場合はhas()を使用します。

has()とはとある要素を持つ要素のみを選択するメソッドなります。

そのため、find()と組み合わせて使用することで所持している要素を指定して検索を行うことができます。

● index.html

● style.css

● main.js

実行結果

find()とhas()で所持している要素を指定して検索を行った結果

find()とhas()を使用して、所持している要素を指定して検索を行っています。

今回はattr()を使用して色が変化するクラスを追加しています。

そのため、ボタンをクリックすると「grandchild」クラスの要素の色が変化しています。

インデックスを指定して検索を行う場合

find()でインデックスを指定して検索を行うにはeq()を使用します。

eq()とはインデックス番号で指定された要素のみを選択するメソッドとなります。

そのため、find()と組み合わせて使用することでインデックスを指定して検索を行うことができます。

● index.html

● style.css

● main.js

実行結果

find()とeq()でインデックスを指定して検索を行った結果

find()とeq()を使用して、インデックスを指定して検索を行っています。

今回はaddClass()を使用して色が変化するクラスを追加しています。

そのため、ボタンをクリックすると「child」クラスの2番目と6番目にマッチした要素の色が変化しています。

もし、eq()について詳しく知りたい場合は下記の記事をご参考ください。

また、addClass()について詳しく知りたい場合は下記の記事をご参考ください。

find()を使用した実際のケース

find()を使用した実際のケースについてご紹介します。

例えば、find()を使用してスロットのようなアプリを作成します。

● index.html

● style.css

● main.js

実行結果(ハズレの場合)

find()でスロットのようなコードを作成した結果(はずれ画面)

実行結果(アタリの場合)

find()でスロットのようなコードを作成した結果(あたり画面)

find()によってスロットのようなアプリを作成しています。

今回は、スロットのブロックの要素をセレクタとして取得する場合にfind()を使用しています。

また、「acrive」クラスが付与された要素の数を検索する場合にもfind()を使用しています。

そのため、ボタンを押すと、ランダムに表示されている数字が止まり、「777」が揃うと「大当たり」のアラートが表示されます。

JavaScriptで指定した要素の検索を行う場合

JavaScriptで親要素をセレクタとして取得するにはquerySelector()を使用します。

querySelector()とは、指定したセレクタのHTML要素にアクセスするメソッドとなります。

● index.html

● style.css

● main.js

実行結果

JavaScriptのquerySelector()で指定した要素を検索を行った結果

querySelector()で指定した要素を検索しています。

そのため、ボタンをクリックすると「obj-1」クラスの要素の色が変化しています。

もし、querySelector()について詳しく知りたい場合は下記の記事をご参考ください。

コールバック関数を使用して指定した要素の検索を行う場合

コールバック関数を使用して指定した要素の検索を行うには、filter()を使用します。

filter()とは、セレクタに対してフィルタリングを行うメソッドになります。

そのため、取得したセレクタの中から検索し、マッチしたものだけをセレクタとして使用するようになります。

● index.html

● style.css

● main.js

実行結果

filter()でフィルタリングをして要素の検索を行った結果

filter()でフィルタリングをして要素の検索を行っています。

今回は、マッチした要素から幅が100px以上である条件で要素を検索しています。

そのため、ボタンをクリックすると「obj-1」クラスの要素の色が変化しています。

まとめ

⚫︎ find()とは指定した要素の親要素をセレクタして取得することができるメソッドである。

⚫︎ find()は下記の引数を指定して使用する。
・子セレクタ(必須)

⚫︎ 検索する要素が存在する場合にfind()を使用すると、マッチした要素をセレクタとして取得する。

⚫︎ 検索する要素が存在しない場合にfind()を使用すると、要素をセレクタとして取得できない。

⚫︎ 検索する要素が複数存在する場合にfind()を使用すると、マッチした要素全てををセレクタとして取得する。

⚫︎ pfind()で複数の要素を指定して検索を行うには引数の子セレクタをカンマで区切って指定する。

⚫︎ find()で検索した複数の要素にそれぞれ別の処理を行うにはeach()と組み合わせて使用する。

⚫︎ find()で指定した要素の親族要素を検索するには下記のような方法がある。
・parents()と組み合わせることでいとこ要素を検索できる
・siblings()と組み合わせることで甥姪要素を検索できる
・children()と組み合わせることで子孫要素を検索できる

⚫︎ find()で高度な検索を行うには下記のような方法がある
・厳密なフィルタリングを行って検索を行うにはfind()を連続して使用する
・否定条件を使用して検索を行うにはnot()と組み合わせて使用する
・所持している要素を指定して検索を行うにはhas()と組み合わせて使用する
・インデックスを指定して検索を行うにはeq()と組み合わせて使用する

⚫︎JavaScriptで指定した要素の検索を行うにはquerySelector()を使用する。

⚫︎コールバック関数を使用して指定した要素の検索を行うにはfilter()を使用する。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA