jQueryでfindメソッドを使って子要素を選択する方法【初心者向け】

プログラミング初心者向けに、jQueryのfindメソッドを使って子要素を選択する方法を解説しています。処理している要素からさらに絞り込みある特定の要素を選択する上で便利なメソッドです。ぜひご覧ください。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

JavaScriptのライブラリであるjQueryでonメソッドを使ってイベントを設定する方法を解説しています。jQueryを使う上でよく使用するメソッドなので非常に便利です。自分でも書いてみて覚えていきましょう。

jQueryについてそもそもよく分からないという方は、jQueryとは何なのか解説した記事をまずご覧ください。

 

なお本記事は、オンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)の内容をもとにしています。

 

大石ゆかり

田島メンター!parentメソッドで要素の親要素を取得できましたが、逆に子要素を取得するメソッドもありますよね?

田島悠介

childrenメソッドがあるよ。ただ、今回はfindメソッドを使ってみるよ。

大石ゆかり

findも子要素を取得するメソッドなんですか?

田島悠介

childrenメソッドはある要素の直下の要素、findメソッドはある要素以下の要素って違いがあるんだよ。さっそく見てみよう!

 

findメソッドとは

jQueryではセレクタの指定がコードの2割弱を占めると言われています。そのためセレクタの指定が下手だと変にコードが長くなってしまい読みにくいコードになってしまいます。

セレクタを絞るためのメソッドがjQueryに存在しますが、その中の一つがfindメソッドになります。

findメソッドは、あるタグ内の子孫要素を選択するためのメソッドです。

 

findメソッドの書き方

findメソッドはセレクタの後に呼び出すのが一般的です。

$(“セレクタ1”).find(“セレクタ2”).(“処理”);

上のコードだとセレクタ1内にあるセレクタ2のみに処理が適応されます。

このように簡単に直感的にセレクタを絞ることができます。

 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

実際に書いてみよう

それでは実際にfindメソッドを書いていきましょう。今回は、spanタグで囲まれた要素のみ色を変えたいと思います。

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
    <script>
      $(function(){
        $("p").find("span").css("color","red");
      });
    </script>
  </head>
  <body>
    <p>黒い<span>赤い</span>黒い<span>赤い</span></p>
  </body>
</html>

まずpタグで要素を絞りその後、findメソッドでspanタグを指定し、さらに要素を絞っています。

結果pタグ内のspanタグ内にのみ処理が適応されます。

 

まとめ

今回は、findメソッドについて解説していきました。

findメソッドを使用すれば、入れ子構造になっているhtmlの子孫要素を簡単に指定することができます。

また読む側を直感的に理解することができるので、非常に読みやすいコードになります。是非身につけるようにしましょう。

 

大石ゆかり

pタグの中にあるspanタグにだけ、CSSの変更が適用されていますね。

田島悠介

そうそう。pタグ以下から指定できるんだよね。chidlrenメソッドの場合だと、直下のものしか対照に出来ないので、工夫が必要になるね。

大石ゆかり

childrenメソッドより、findメソッドのほうがより広い範囲で選択できるってことですか?

田島悠介

その通り!

 

[お知らせ]TechAcademyでは最短4週間でフロントエンドの技術が身につくフロントエンドオンラインブートキャンプを開催しています。jQueryを使ってリッチなWebサービスを作りたい方はぜひご覧ください。