jQueryでの子要素のfindとは？jQueryでの子要素の取得方法紹介！
- システム
エンジニア - jQueryで子要素を取得するにはどうすればいいのですか。
- プロジェクト
マネージャー - 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タグを取得します。
- システム
エンジニア - findメソッドを使うと、さまざまな属性の子要素の取得できるのですね。とても参考になりました。
- プロジェクト
マネージャー - ご紹介したソースコードを参考にご自身でもソースコードを書いて理解を深めてください。
jQueryでの子要素の取得方法について理解しよう
いかがでしたでしょうか。jQueryでの子要素の取得方法について、「指定した子要素をfind」「id属性の子要素をfind」「class属性の子要素をfind」「name属性の子要素をfind」「複数属性の子要素をfind」「最初の子要素のみをfind」を説明しました。
ぜひご自身でjQueryのソースコードを書いて、理解を深めてください。
FEnet.NETナビ・.NETコラムは株式会社オープンアップシステムが運営しています。
株式会社オープンアップシステムはこんな会社です
秋葉原オフィスには株式会社オープンアップシステムをはじめグループのIT企業が集結！
数多くのエンジニアが集まります。
-
スマホアプリから業務系システムまで
スマホアプリから業務系システムまで開発案件多数。システムエンジニア・プログラマーとしての多彩なキャリアパスがあります。
-
充実した研修制度
毎年、IT技術のトレンドや社員の要望に合わせて、カリキュラムを刷新し展開しています。社内講師の丁寧なサポートを受けながら、自分のペースで学ぶことができます。
-
資格取得を応援
スキルアップしたい社員を応援するために資格取得一時金制度を設けています。受験料(実費)と合わせて資格レベルに合わせた最大10万円の一時金も支給しています。
-
東証プライム上場企業グループ
オープンアップシステムは東証プライム上場「株式会社オープンアップグループ」のグループ企業です。
安定した経営基盤とグループ間のスムーズな連携でコロナ禍でも安定した雇用を実現させています。
株式会社オープンアップシステムに興味を持った方へ
株式会社オープンアップシステムでは、開発系エンジニア・プログラマを募集しています。
年収をアップしたい！スキルアップしたい！大手の上流案件にチャレンジしたい！
まずは話だけでも聞いてみたい場合もOK。お気軽にご登録ください。
新着案件New Job
-
開発エンジニア/東京都品川区/【WEB面談可】/在宅ワーク
月給29万～30万円東京都品川区(大崎駅) -
遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク
月給45万～60万円東京都港区(六本木駅) -
病院内システムの不具合対応、保守/東京都豊島区/【WEB面談可】/テレワーク
月給30万～30万円東京都豊島区(池袋駅) -
開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク
月給50万～50万円東京都豊島区(大塚駅) -
債権債務システム追加開発/東京都文京区/【WEB面談可】/在宅勤務
月給62万～67万円東京都文京区(後楽園駅) -
PMO/東京都豊島区/【WEB面談可】/在宅勤務
月給55万～55万円東京都豊島区(池袋駅)
関連記事Related Posts
-
jQueryでのクリックイベント on(click) の使い方とは？offメソッドについても紹介！
jQueryでのクリックイベント on(click) の使い方を紹介します！ 今回は、jQueryでのクリックイベントの使い方について説明します。 jQueryでクリックイベントを設定するには、on(click)を使用し […]
-
jQueryのvalをわかりやすく解説！valを正しく使いこなそう
jQueryのvalとは？ jQueryはJavaScriptで使える強力なライブラリです。jQueryは複雑な処理を簡単に実行することができます。その機能の中でval()はメソッドと呼ばれる機能で、HTMLのvalue […]
-
jQueryのsubmitとは？jQueryのsubmitでフォームを使いこなそう
jQueryのsubmitとは？ jQueryはJavaScriptで利用できる多機能なライブラリです。その機能の1つのsubmitメソッドは、HTMLのsubmitの処理と連動して様々なことがます。JavaScript […]
-
JavaScriptでのStringの使い方｜各メソッドをコード付きで紹介
JavaScriptでのStringの使い方とは？ 今回は、JavaScriptでの文字列（String）の使い方について説明します。JavaScriptでは、文字列をダブルクォーテーション（”）で囲みます。 […]
-
スムーススクロールとは？jQuery・CSS・JavaScriptそれぞれでの使用方法について詳しく解説！
jQuery・CSS・JavaScriptでスムーススクロールする方法とは？ 今回は、Webサイトでスムーススクロールする方法について説明します。 jQuery・CSS・JavaScriptそれぞれでスムーススクロールが […]
