findメソッドの使い方ENGINEER.CLUB編集部2018/12/13TweetPocketjQueryを書いていて、特定の条件の要素をすべてピックアップしたいと思うこと、ありませんか?findメソッドは子孫要素を条件で抽出したい場合にぴったりのメソッドです。使いこなせるようになると、要素を個別で指定する必要が無くなるためシンプルなプログラムが書けるようになります。このページではfindメソッドの基本的な使い方から応用まで、サンプルを交えて説明します。目次1.findメソッドの基本的な使い方1-1.DOM要素を条件とする1-2.セレクタで指定した要素を条件とする1-3.jQueryオブジェクトを条件とする1-4.findメソッドの戻り値2.複数条件を指定する1-2.AND条件2-2.OR条件3.eachメソッドで取得要素をループする4.まとめ1.findメソッドの基本的な使い方findメソッドの基本的な使い方を解説します。この解説で使用するのは以下のHTMLのサンプルです。class='inside'></div></div>jQueryのプログラムは以下のfunctionの中に追加していきます。{//findメソッドを使用した処理を追加する});サンプルの画面は以下になります。サンプルでは、赤枠で囲ったdiv要素「parent_div」内のテキストボックスを条件に応じて様々なパターンで入力不可属性を追加していきます。孫要素もfindメソッドで取得できることを理解しやすいよう、青色の背景であるdiv要素「child_div」を「parent_div」内に追加しました。1-1.DOM要素を条件とするまずは対象要素の配下にある、特定のDOM要素を取得する書き方です。対象要素.find(element)早速サンプルを見てみましょう。parent_div要素内のすべてのテキストボックスを入力不可にしています。true);});子要素だけでなく、孫要素であるテキストボックス「input4」も入力不可になっていますね。1-2.セレクタで指定した要素を条件とする対象の配下にある、セレクタ条件に一致するオブジェクトを選択する書き方です。1-1のDOM要素指定よりも細かく条件設定ができ、また応用も効きます。実務でも最も書く機会が多いのではと思われるパターンです。対象要素.find(セレクタ)まずはidセレクタのサンプルです。true);});idが「input1」であるテキストボックスのみ入力不可になりました。次にnameセレクタのサンプルです。true);});nameが「input2」であるテキストボックスに適用されました。続けてclassセレクタのサンプルです。true);});class名が「outside」であるテキストボックスに適用されました。object)下のサンプルのように、jQueryオブジェクトを作成して条件に指定する方法です。true);});サンプルの結果は使い方2でidを指定した場合と同様です。使い方1や2と比較するとやや冗長に感じますが、他の処理で既に作成したオブジェクト変数を条件として使用したい場合には使えそうです。1-4.findメソッドの戻り値findメソッドはjQueryオブジェクトを戻り値として返します。場合によっては複数のオブジェクトが返却されます。したがってサンプルで見てきた通り、findの後にjQueryオブジェクトを対象としたメソッドをつなげて書くことも可能です。その場合、後続のメソッドはfindで取得した要素すべてに適用されます。2.複数条件を指定するセレクタ指定のパターンをベースに、findメソッドに複数条件を指定する方法を解説します。セレクタで複数条件を指定する場合の書き方と重複するので、すでにセレクタについて十分な知識がある方は飛ばしていただいて問題ありません。わかりやすくするために1で使用したサンプルを編集しています。テキストボックスに新しくクラス「top」「bottom」が加わっています。bottom'></div></div>1-2.AND条件AND条件で取得するときは、条件同士を「+」でつなぎます。)サンプルではクラス名が「outside」かつ「bottom」であるテキストボックスを取得しています。true);});2-2.OR条件OR条件で取得するときは、条件同士を「,」でつなぎます。)サンプルでは「inside」クラスを持つテキストボックス「input4」、そして「top」クラスを持つテキストボックス「input1」「input2」を入力不可としています。true);});3.eachメソッドで取得要素をループするマッチする子孫要素をまとめて取得するfindメソッドは非常に心強いメソッドですが、取得した要素を一つずつ処理したい場合もあるでしょう。そのような時には「each」も併せて使いましょう。「.find()」メソッドはeachと非常に相性がよいです。findでマッチングさせた要素をeachで順に処理する場合、以下のように組み合わせます。{$('#parent_div').find('input').each(function(){console.log($(this).attr('name'));});});結果は以下のように出力されます。対象のテキストボックスの名称が、順に出力されました。4.まとめ以上、jQueryのfindメソッドの使い方のまとめでした。基本的な使い方をマスターするだけでもかなり使えるメソッドですが、何といっても条件部分、特にセレクタの中身を柔軟に変更できることがfindの強味です。findの使い方と同時にぜひセレクタの応用もマスターして、自由に要素取得できるようになりましょう。私たちは、全てのエンジニアに市場価値を高め自身の望む理想のキャリアを歩んでいただきたいと考えています。今あなたが転職を検討しているのであればこちらの記事をご一読ください。理想のキャリアを実現するためのヒントが見つかるはずです。『技術力』と『人間力』を高め市場価値の高いエンジニアを目指しませんか?私たちは「技術力」だけでなく「人間力」の向上をもって遙かに高い水準の成果を出し、関わる全ての人々に感動を与え続ける集団でありたいと考えています。高い水準で仕事を進めていただくためにも、弊社では次のような環境を用意しています。ボールドでは「キャリア採用」のエントリーを受付中です。以下のボタンより弊社の紹介をご覧いただき、あなたの望むキャリアビジョンをエントリーフォームより詳しくお聞かせください。EngineerclubFacebookTwitterFeedlyコメントコメントをキャンセル次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。プログラミング言語とインフラでのインスタンスって?2020.01.15IT業界ヘルプデスクに転職したい。