jQueryのfindメソッドってなに？findメソッドの基本の使い方4つ

jQuery

Javascript
プログラミング言語

公開日時: 2020-09-14 　更新日時: 2022-06-09

この記事でわかること

システム エンジニア: 子要素といえば「childrenメソッド」が思い浮かびますが、何が違うんでしょうか？

プロジェクト リーダー: childrenメソッドは一階層下の子要素だけ取得しますが、findメソッドは子要素だけに限らずすべての子孫要素から指定の要素を取得することができます。

jQueryとは？

jQueryとは、HTMLの操作やイベント処理、CSSアニメーションやAjaxを、より簡便に記述できるように設計された、JavaScriptライブラリのことです。

無料で利用できるオープンソースのライブラリであり、多数のブラウザーで機能する使いやすいAPIにより、汎用性・拡張性が高いため、世界のWebサイトの７割以上で使われています。

JavaScriptを使用しているサイトではjQueryがほぼ利用されていると言っても過言ではありません。

jQueryのfindメソッドって？

findメソッドとは、選択した要素のすべての子孫要素をたどって、指定の条件に当てはまる要素を見つけるためのjQueryメソッドです。
findメソッドは次のように記述します。

$(“セレクタ”).find(“取得したい子孫要素”);

findメソッドの基本の使い方4つ

findメソッドは、「検索対象となる親要素.find(条件)」のような書き方になります。

findメソッドのカッコに入る条件には、DOM (Document Object Model）要素（element）か、セレクタ、あるいはjQueryオブジェクトが入ります。また、findメソッドが返す戻り値はjQueryオブジェクトになります。

それでは、それぞれもう少し具体的に見ていきましょう。

findメソッドの基本の使い方1：DOM要素を取得する

jQueryはHTMLのDOM要素を簡単に扱うことができます。DOM要素を取得するには、「$(“検索対象となる親要素”).find(“その親要素の中から取得したい子孫要素”);」となるように記述します。

例えば、divタグ内のpタグで囲まれている部分を指定したい場合は、「$(“div”).find(“p”);」と記述します。検索対象内のliタグであれば「$(“div”).find(“li”);」になります。

findメソッドは、「検索対象.find(“要素”);」という形で使うことをまずは押さえましょう。

findメソッドの基本の使い方2：セレクタで指定した条件に一致したオブジェクト選択

findメソッドは、「検索対象.find(“セレクタ”);」という形でも使うことができます。

セレクタとはCSSのセレクタの概念と同じです。CSSのDOM構造を利用することができるため、jQueryはその記述を簡便にすることが可能になっています。例えば、ID名を指定した要素を取得させるには、「検索対象.find(“#id_name”);」と記述します。

セレクタには、後ほど紹介する属性(attribute)も含まれます。

findメソッドの基本の使い方3：jQueryオブジェクトを作成して条件に指定

findメソッドは、DOM要素そのものだけでなく、jQueryオブジェクトも指定することができます。つまり、「検索対象.find(“jQueryオブジェクト”);」と記述することもできます。

検索範囲内にオブジェクトを作成してあれば、範囲配下の子孫要素から該当するjQueryオブジェクトを指定することができるのです。記述するときは「検索対象.find(“$jq_obj”);」のようになります。

findメソッドの基本の使い方4：jQueryオブジェクトをfindメソッドで戻り値として返す

オブジェクトは、基本的にはHTMLドキュメントから取得されるDOM要素のまとまりのような形を取りますが、findメソッドはその機能性ゆえに、jQueryオブジェクトのDOM要素のセットを変更する可能性があるため、実際には結果の要素とともに、新しいjQueryオブジェクトも返します。

その中の「length」を参照することで、検索対象内に指定していた要素が含まれるているか、要素の有無を確認するような使い方もできます。

例えば、「var result = 検索対象.find(指定対象);」とfindメソッドの結果を「result」に入れ、「console.log(result.length);」と表示を命令すると、検索対象の中に、指定対象がいくつカウントされたか、数値が返ってきます。

戻り値「length」って？

戻り値（返り値）(return value)とは、メソッドなどが処理を終了する際に返ってくる値のことを指します。「.length」で、jQueryオブジェクトにおける「要素の数」を指定できます。

要素や文字数、配列の値をカウントしたものがlengthにあたります。lengthが何を指すかはオブジェクトのデータ型によります。

findメソッドの戻り値におけるlengthは、findメソッドでピックアップしてきた要素（findメソッドが返したきたjQueryオブジェクトに含まれる要素）の合計数にあたります。

子要素を取得する3つの方法

jQueryのfindメソッドでHTMLの要素を取得するのに、HTMLの要素そのもの、つまりタグで指定する他に、HTMLの要素の持つ属性を指定したり、CSSの仕組みであるセレクタを利用して指定することができます。

基本的なHTMLの子要素の取得方法から、複数の属性で子要素を取得する方法、そしてid/class属性で子要素を取得する方法について見ていきましょう。

子要素を取得する方法1：findメソッドで子要素を取得する

例えば、以下のような構成のHTMLコードがあるとします。

くだものリスト

りんご

みかん

ばなな

もし、divタグ内のpタグで囲まれている文字を指定したい場合、findメソッドを用いて次のように記述します。

$(“div”).find(“p”);

これで指定することができました。
それでは、findメソッドの後ろにcssメソッドをつなげて記述し、pタグで囲まれている文字を赤色に変更してみましょう。

$(function(){
// findメソッドで

内の要素を指定し赤色に変更
$(“div”).find(“p”).css(“color”, “red”);
});

全体のコードは以下のようになります。

index.html

くだものリスト

りんご

みかん

ばなな

pタグで囲まれている「くだものリスト」という文字だけが赤色に変更されましたね。
このように、同じdivタグで囲まれている要素が複数あっても、findメソッドで指定の子孫要素を取得することができるのです。

子要素を取得する方法2：複数の属性で子要素を取得する

HTML要素は、それぞれの要素（タグ）の種類ならではの「属性(attribute)」を持っています。jQueryは、もちろん属性を扱うことができます。

findメソッドはセレクタに属性を指定することもできます。属性の記述は「[属性名]」あるいは「[属性名=“属性値”]」のようになります。複数の属性を指定したいとき（and）は、[]（カギカッコ）を連続して記述します。

例えば、inputタグでid属性を持ち、かつname属性が「man」で終わる条件を指定したい時は、「検索対象.find(input[id][name$=“man”])」のように記述します。

子要素を取得する方法3：id/class属性で子要素を取得する

属性には、CSS等で活用されるIDやクラスのようにユーザーが付与できるものもあります。

jQueryのfindメソッドを利用して、クラス名やIDを指定して子孫要素を取得するには、「検索対象.find(“#id_name”);」や「検索対象.find(“.class_name”);」のような記述になります。

これで検索対象のすべての子孫要素のうち、ID名を付けた要素や、クラス名を付けた要素がfindメソッドで選択されます。

findメソッドとeachメソッドをあわせて使う場合

findメソッドは、処理を繰り返し実行する「eachメソッド」と併用されることも多いです。
では、さっそくfindメソッドとeachメソッドとの併用方法を見ていきましょう。

先ほどと同じHTMLコードを使用します。

くだものリスト

りんご

みかん

ばなな

では、リスト内の要素を順番に取得してみましょう。
同時に併用する際は、findメソッドの後ろにメソッドチェーンでeachメソッドをつなげていきます。eachメソッドの引数には、index番号とその要素を指定しています。

$(function(){
$(“div”).find(“li”).each(function(index, element) {
console.log(index);
console.log($(element).text());
})
});

コンソールに出力されているとおり、eachメソッド内で順番に要素を取得できていることが分かります。

findメソッドと他のメソッドをあわせた属性値を検索する方法

jQueryのfindメソッドは汎用性が高く便利なため乱用しがちになりますが、検索対象に含まれるすべての子孫要素を検索するメソッドのため、マシンに多くの負荷を掛けてしまいます。何をしたいのか目的に合わせて、適宜、他のメソッドも利用することが必要になってきます。

ここでは、取得したい対象の条件をより絞れるfirstメソッドとattrメソッド、findメソッドとは反対に親要素を取得するparentメソッドをご紹介します。

firstメソッドで最初の子要素のみを検索する場合

firstメソッドとは、一致した要素の直下の子要素で、かつ最初の要素のみを取得するjQueryのメソッドです。

例えば、リストの内の最初の項目や、テーブルの内の最初の行（最上段）を取得するのに向いています。それぞれ「$(“li”).first()」、「$(“table”).first()」のような記述の仕方になるでしょう。

子孫要素のうちの深い階層で、初めて条件に合致する要素を取り出すときに便利なメソッドです。

attrメソッドで任意の子要素の属性値を検索する場合

attrメソッドは応用性に富むjQueryのメソッドになります。その名の通り、attribute（属性）を扱うメソッドであり、HTML要素の属性を簡単に取得・設定・変更することができます。

「検索対象.attr(“属性名”)」とすると、検索対象内の属性名が一致した最初の要素の、属性値を返します。各要素の値を個別に取得するには、前述のeachメソッドや、mapメソッドなどのループ構造を利用することになります。

parentメソッドで任意の親要素を検索する場合

parentメソッドは、対象とした要素のひとつ直ぐ上の親を検索するjQueryのメソッドです。

目的としている要素を、包含している要素を指定したい時に便利なメソッドです。

記述としては、「目的の要素.parent()」となります。例えば、目的のID名を持つタグを入れ子に持っているHTML要素を取得したいときは、「$(#id_name).parent()」と記述することになります。

findメソッドとchildrenメソッドの違いとは？

childrenメソッドは、対象とした要素の直下の子要素のみをピックアップしてくれるjQueryのメソッドです。

先ほど述べたように、findメソッドは対象配下の全ての子孫要素を検索してしまうのに対して、childrenメソッドは直下の子要素のみで孫以下の要素は検索しないため、findメソッドと比較して負荷の軽いメソッドになります。状況に応じて使い分けましょう。

jQueryでのchildrenメソッドとは？childrenメソッドを使いこなそう | .NETコラム

システム エンジニア: eachメソッド内で分岐をすれば、より個別の処理にも対応できそうですね。

プロジェクト リーダー: そうですね！eachメソッドとの併用で、より活用の場が広がりますよ。

findメソッドを活用して効率よく処理を書こう

今回は、findメソッドの使い方やeachメソッドとの併用方法をお伝えしていきました。findメソッドは、指定要素の子孫要素を一気に取得できる効率の良いメソッドです。eachメソッドと併用すれば、個別の設定にも対応することができます。ぜひfindメソッドを活用して、効率よく処理を書いてみてください。

FEnet.NETナビ・.NETコラムは株式会社オープンアップシステムが運営しています。

株式会社オープンアップシステムはこんな会社です

秋葉原オフィスには株式会社オープンアップシステムをはじめグループのIT企業が集結！
数多くのエンジニアが集まります。

スマホアプリから業務系システムまで

スマホアプリから業務系システムまで開発案件多数。システムエンジニア・プログラマーとしての多彩なキャリアパスがあります。
充実した研修制度

毎年、IT技術のトレンドや社員の要望に合わせて、カリキュラムを刷新し展開しています。社内講師の丁寧なサポートを受けながら、自分のペースで学ぶことができます。
資格取得を応援

スキルアップしたい社員を応援するために資格取得一時金制度を設けています。受験料(実費)と合わせて資格レベルに合わせた最大10万円の一時金も支給しています。
東証プライム上場企業グループ

オープンアップシステムは東証プライム上場「株式会社オープンアップグループ」のグループ企業です。

安定した経営基盤とグループ間のスムーズな連携でコロナ禍でも安定した雇用を実現させています。

株式会社オープンアップシステムに興味を持った方へ

株式会社オープンアップシステムでは、開発系エンジニア・プログラマを募集しています。

年収をアップしたい！スキルアップしたい！大手の上流案件にチャレンジしたい！
まずは話だけでも聞いてみたい場合もOK。お気軽にご登録ください。

株式会社オープンアップシステムへ応募する
会員登録不要! カンタン45秒!

jQueryのfindメソッドってなに？findメソッドの基本の使い方4つ

jQueryとは？

jQueryのfindメソッドって？