.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のソースコードを書いて、理解を深めてください。
Search キーワード検索
Popular 人気の記事
-
.NET Framework 3.5をWindows10にインストールする方法
2019年10月24日 -
【VB.NET入門】DataGridViewの使い方まとめ
2019年12月22日 -
VB.NETとは？特徴や他言語と比べておすすめできる理由も解説！
2019年12月21日 -
EdgeとChromeはどう違う？それぞれのスペック7つを比較解説！
2020年09月28日 -
【VB.NET入門】学ぶメリット・知識ゼロから始める手順全まとめ！
2019年12月21日
reccomended おすすめ記事
-
C#のusingステートメントでリソースの解放【Disposeとの違いとは】
2020年03月17日 -
【SQL Serverログの操作】トランザクションログの使用量を確認する方法
2020年03月16日 -
【.NETが統合】.NET 5の概要と今後のリリース予定
2020年03月05日