jQueryでfindメソッドを使って子要素を選択する方法【初心者向け】
プログラミング初心者向けに、jQueryのfindメソッドを使って子要素を選択する方法を解説しています。処理している要素からさらに絞り込みある特定の要素を選択する上で便利なメソッドです。ぜひご覧ください。
TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が1,000以上あります。
JavaScriptのライブラリであるjQueryでonメソッドを使ってイベントを設定する方法を解説しています。jQueryを使う上でよく使用するメソッドなので非常に便利です。自分でも書いてみて覚えていきましょう。
jQueryについてそもそもよく分からないという方は、jQueryとは何なのか解説した記事をまずご覧ください。
なお本記事は、オンラインブートキャンプ フロントエンドコース（JavaScript・jQuery講座）の内容をもとにしています。
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の子孫要素を簡単に指定することができます。
また読む側を直感的に理解することができるので、非常に読みやすいコードになります。是非身につけるようにしましょう。
[お知らせ]TechAcademyでは最短4週間でフロントエンドの技術が身につくフロントエンドオンラインブートキャンプを開催しています。jQueryを使ってリッチなWebサービスを作りたい方はぜひご覧ください。