「find()」と「children()」の違いとは?などの基本的な内容から、応用的な使い方に関しても解説していきます。まとめ「find()」とは?それでは、まず最初に「find()」メソッドについて基本的な知識を学習していきましょう!「find()」は、対象となる要素から下にある階層をすべて辿って目的の「子要素」を取得することができるメソッドです。</div></div></body>この例では、いくつかの階層構造になったHTMLが配置されていますね。id属性値「wrap」が付与されたdiv要素に対して、1つ下の階層にある「p要素」は子要素と言えます。同じ階層にあるdiv要素のさらに1つ下の階層にある「a要素」は子孫要素と言えるわけです。1つ下の階層にある要素は「子要素」であり、それ以下の階層にある要素に関しては「子孫要素」となります。】のように引数へ取得したい要素のタグ・属性を指定します。href="#">リンク</a>この例では、先ほど紹介したHTMLを使っています。この時に「#wrap」が付与されたdivタグを対象にして、「find('a')」と記述することで階層下のaタグを取得することができます。ポイントは、子孫要素...つまり「aタグ」が見つかるまでどんどん階層下を辿って検出できるという点です。id="text">サンプルテキスト</p>この例では、3階層のHTMLが構成されていますね。今回も「#wrap」が付与されたdivタグを対象にして、class属性「link」とid属性「text」の要素を取得しようとしています。先ほどは「class属性」と「id属性」を別々のfind()メソッドを使って取得しました。「find()」メソッドはセレクタ指定と同じように引数を指定できるので、当然ながら複数の属性を指定することも可能なのです。#text')」のように記述することで、class属性「link」とid属性「text」の両方を一度に取得できるわけです。(カンマ)」で区切ることで、複数のタグや属性を一度に指定できるのです。each()による複数要素の取得ここからは、複数の要素を同時に取得する方法についても見てみましょう!一般的に、連続した要素を同時に取得するのに便利な方法として「each()」メソッドがあります。);})</script></body>実行結果リスト1リスト2リスト3この例では、「find()」を使ってすべての「li要素」を検出するようにしています。{}」のように記述することで、「li要素」1つずつに対して処理ができます。コールバック関数の引数である「index」は要素のインデックス番号であり、「element」は対象のli要素になります。そのため、「element.textContent」と記述すればli要素のテキスト文字を取得することができるわけです。戻り値を活用することで、応用範囲が広い条件分岐の処理を記述できるようになるのでしっかりと覚えておきましょう。「find()」を使って任意の要素を取得する際に、「戻り値」として「length」を取得することができます。</div></div>div要素の中にもう1つdivタグがあり、その中にリンク要素が配置されています。そこで、これまで通りfind()を使ってリンク要素を検索してみましょう。);実行結果0この例では、「#wrap」が付与されたdivタグを対象にして、「.text」が付与された要素を取得しようとしていますね。見るとリンク要素に付与されているのは「.text」ではなく「.link」になります。存在していないHTML要素をfind()で検索しようとしていたわけですね。戻り値を使って「length」を出力すると「0」が取得できているのが実行結果から分かります。今度は、取得した「戻り値」を活用して条件分岐処理を作ってみましょう!方法は簡単で、戻り値の「値」をIF文の条件式に当てはめるだけで実現します。前章で、要素が見つからなかったら「0」が取得できると解説しました。JavaScriptでは「0」をfalse、それ以外の数値をtrueと解釈することが可能なので条件式として成立するわけです。console.log('存在しません!');}このように「length」をIF文の条件式に利用するだけで、HTML要素が存在するかどうかを条件分岐できるわけです。検索した結果、見つからなかったら処理を中断したり別の要素を再検索するような処理を記述することができますね。find()の検索技ここからは、find()を別のメソッドと組み合わせる応用技について解説していきます!よく使われる組み合わせ例として、「attr()」「parent()」「first()」があるのでそれぞれ詳しく見ていきましょう!attr()で任意の子要素の属性値を検索する方法まずは、「attr()」メソッドを組み合わせた検索例をご紹介します。「attr()」はHTML要素の属性を取得・設定できるメソッドですが、find()と組み合わせれば属性の置換が実現します。次のようなHTMLがあるとします。</div></div>この中で、class属性値が「text」の要素を「sample」に変更してみましょう!そこで、まずはfind()メソッドにeach()を使ってループ処理を作ります。//該当する要素1つずつに対して処理を行う})このように記述することで、class属性「text」に該当する要素すべてに対して処理を実行することができますね。'sample');})attr()メソッドを使ってclass属性値を「sample」に設定しているのが分かります。これにより、class属性値「text」に該当する要素が「sample」に変更されたclass属性を持つことになるわけです。次に、「parent()」メソッドを組み合わせてみましょう!「find()」は基本的に子要素を検索するメソッドなのですが、「parent()」と組み合わせると同じ階層の要素を検索できます。次のようなHTMLを想定してみます。</div></div>「.wrap」が付与されたdiv要素と同じ階層にあるp要素を検索してみましょう。これまで通りに「$('.wrap').find('p')」と記述しても同階層の要素は検索できません。$('.wrap').parent().find('p');find()の前に「parent()」メソッドを実行していますね?こうすることで、1階層上にあるdiv要素から子要素の「pタグ」を検索できるようになります。そのため、結果的に同階層のHTML要素を検索できる合わせ技になるというわけです。最後に、「first()」メソッドを組み合わせた例を見ていきます!「first()」メソッドを使うと、同じ階層にある連続した要素の先頭に位置する要素だけを取得することができます。そこで、「find()」を使って目的の要素を探し出してから「first()」で先頭の要素だけを取得してみましょう!まず最初に、次のようなリスト構造のHTMLを用意します。</ul></div>find()とfirst()を組み合わせて「li要素」の先頭だけを取得してみます。);実行結果<li>リスト1</li>この例では、「find('li')」と記述することでリスト要素を検索しているのが分かりますね。次に、first()を実行することで検索したすべてのリスト要素から、先頭の要素だけを抽出することになるのです。「find()」「children()」は両方とも子要素を取得することができるメソッドです。決定的に違う点はその取得できる「範囲」にあります。class="text1">テキスト1</p>この例では、2つの階層構造を持つHTMLが配置されています。「#wrap」が付与されたdivタグを対象に、「find()」「children()」それぞれで「.text1」が付与されたp要素を取得しています。class="text2">テキスト2</p>undefined注目すべきは実行結果です!「find()」で「.text2」が付与されたp要素を取得することは出来ていますね。「children()」で取得しようとしても「undefined」になっているのが分かります。この結果からも分かるように、「children()」は1つ下の階層にある要素しか取得することができないのです。「each()」を使って該当する要素をすべて処理することができる効果的な検索技として「attr()」「prop()」「first()」を組み合わせる方法がある「children()」と「find()」の違いはその対象となる要素の範囲である上記の内容を踏まえて、ぜひ自分のプログラムにも積極的に活用できるように頑張っていきましょう!TweetPocket無料でSEからWebエンジニアへ転職しませんか?侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、システムエンジニアという職業だけどコードが書けない事務作業が多くスキルがないため将来が不安スクールに通うと完全未経験者と同じスタートになるからレベルが合わないという、すでに知識があるSEならではのお悩みがあることに気づきました。弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。こちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。無料体験レッスンを予約する書いた人マサトフリーランスのIT系ライターを8年従事。侍ブログ編集部としては、これまで270記事以上の記事を執筆。Linuxを3年学習。個人プロダクトのWebメディア・アプリ作成経験あり。