.NET開発者のためのブログメディア
jQueryでの子要素のfindとは？jQueryでの子要素の取得方法紹介！
- SE
- jQueryで子要素を取得するにはどうすればいいのですか。
- PM
- jQueryで子要素を取得するにはfindメソッドを使います。
目次
jQueryでの子要素のfindとは？
今回は、jQueryでの子要素の取得方法について説明します。子要素の取得にはfindメソッドを使用します。
ここでは、「指定した子要素をfind」「id属性の子要素をfind」「class属性の子要素をfind」「name属性の子要素をfind」「複数属性の子要素をfind」「最初の子要素のみをfind」の６つについて紹介します。
jQueryでの子要素の取得方法に興味のある方はぜひご覧ください。
指定した子要素をfind
jQueryでは、指定した子要素をfindできます。ここでは、#findが付与されたdivを対象としてfindします。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<html> <head> <meta charset=“utf-8”> <script src=“https://code.jquery.com/jquery-3.5.1.min.js”></script> </head> <body> <div id=“find”> <span>span</span> <p id=“p1” name=“name1”>テキスト1</p> <p id=“p2” name=“name2”>テキスト2</p> <div> <a href=“#”>リンク1</a> </div> <div> <a class=“link” href=“#”>リンク2</a> </div> </div> </body> </html> |
|
1 2 3 4 |
$(function(){ // 指定した子要素をfind $('#find').find('p').css(“color”,”red”); }); |
実行結果は以下のようになります。
See the Pen
jquery_find1 by kskumd (@kskumd)
on CodePen.
find(‘p’)を指定することで、pタグをfindしていることが分かります。見やすさのために、.cssでつなげて文字色を赤に変更しています。
id属性の子要素をfind
jQueryでは、id属性を指定して子要素をfindできます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<html> <head> <meta charset=“utf-8”> <script src=“https://code.jquery.com/jquery-3.5.1.min.js”></script> </head> <body> <div id=“find”> <span>span</span> <p id=“p1” name=“name1”>テキスト1</p> <p id=“p2” name=“name2”>テキスト2</p> <div> <a href=“#”>リンク1</a> </div> <div> <a class=“link” href=“#”>リンク2</a> </div> </div> </body> </html> |
|
1 2 3 4 |
$(function(){ // id属性の子要素をfind $('#find').find('#p1').css(“color”,”red”); }); |
実行結果は以下のようになります。
See the Pen
jquery_find2 by kskumd (@kskumd)
on CodePen.
find(‘#p1’)を指定することで、id属性が「p1」の要素を取得しています。
class属性の子要素をfind
jQueryでは、class属性を指定して子要素をfindできます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<html> <head> <meta charset=“utf-8”> <script src=“https://code.jquery.com/jquery-3.5.1.min.js”></script> </head> <body> <div id=“find”> <span>span</span> <p id=“p1” name=“name1”>テキスト1</p> <p id=“p2” name=“name2”>テキスト2</p> <div> <a href=“#”>リンク1</a> </div> <div> <a class=“link” href=“#”>リンク2</a> </div> </div> </body> </html> |
|
1 2 3 4 |
$(function(){ // class属性の子要素をfind $('#find').find('.link').css(“color”,”red”); }); |
実行結果は以下のようになります。
See the Pen
jquery_find3 by kskumd (@kskumd)
on CodePen.
find(‘.link’)を指定することで、class属性が「link」の要素を取得しています。
name属性の子要素をfind
jQueryでは、name属性を指定して子要素をfindできます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<html> <head> <meta charset=“utf-8”> <script src=“https://code.jquery.com/jquery-3.5.1.min.js”></script> </head> <body> <div id=“find”> <span>span</span> <p id=“p1” name=“name1”>テキスト1</p> <p id=“p2” name=“name2”>テキスト2</p> <div> <a href=“#”>リンク1</a> </div> <div> <a class=“link” href=“#”>リンク2</a> </div> </div> </body> </html> |
|
1 2 3 4 |
$(function(){ // name属性の子要素をfind $('#find').find('[name=name1]').css(“color”,”red”); }); |
実行結果は以下のようになります。
See the Pen
jquery_find4 by kskumd (@kskumd)
on CodePen.
find(‘[name=name1]’)を指定することで、name属性が「name1」の要素を取得しています。
複数属性の子要素をfind
jQueryでは、複数の属性を指定して子要素をfindできます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<html> <head> <meta charset=“utf-8”> <script src=“https://code.jquery.com/jquery-3.5.1.min.js”></script> </head> <body> <div id=“find”> <span>span</span> <p id=“p1” name=“name1”>テキスト1</p> <p id=“p2” name=“name2”>テキスト2</p> <div> <a href=“#”>リンク1</a> </div> <div> <a class=“link” href=“#”>リンク2</a> </div> </div> </body> </html> |
|
1 2 3 4 |
$(function(){ // id, class, name属性の子要素をfind $('#find').find('#p2, .link, [name=name1]').css(“color”,”red”); }); |
実行結果は以下のようになります。
See the Pen
jquery_find5 by kskumd (@kskumd)
on CodePen.
最初の子要素のみをfind
jQueryでは、最初の子要素のみをfindできます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<html> <head> <meta charset=“utf-8”> <script src=“https://code.jquery.com/jquery-3.5.1.min.js”></script> </head> <body> <div id=“find”> <span>span</span> <p id=“p1” name=“name1”>テキスト1</p> <p id=“p2” name=“name2”>テキスト2</p> <div> <a href=“#”>リンク1</a> </div> <div> <a class=“link” href=“#”>リンク2</a> </div> </div> </body> </html> |
|
1 2 3 4 |
$(function(){ // 指定した子要素のfindfirst $('#find').find('p').first().css(“color”,”red”); }); |
実行結果は以下のようになります。
See the Pen
jquery_find6 by kskumd (@kskumd)
on CodePen.
find(‘p’).first()とすることで、最初に見つかったpタグを取得します。
- SE
- findメソッドを使うと、さまざまな属性の子要素の取得できるのですね。とても参考になりました。
- PM
- ご紹介したソースコードを参考にご自身でもソースコードを書いて理解を深めてください。
jQueryでの子要素の取得方法について理解しよう
いかがでしたでしょうか。jQueryでの子要素の取得方法について、「指定した子要素をfind」「id属性の子要素をfind」「class属性の子要素をfind」「name属性の子要素をfind」「複数属性の子要素をfind」「最初の子要素のみをfind」を説明しました。
ぜひご自身でjQueryのソースコードを書いて、理解を深めてください。
