jQueryでfindメソッドを使って子要素を選択する方法【初心者向け】
プログラミング初心者向けに、jQueryのfindメソッドを使って子要素を選択する方法を解説しています。処理している要素からさらに絞り込みある特定の要素を選択する上で便利なメソッドです。ぜひご覧ください。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,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のみに処理が適応されます。
このように簡単に直感的にセレクタを絞ることができます。
実際に書いてみよう
それでは実際に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サービスを作りたい方はぜひご覧ください。
