.net column
.NET開発者のためのブログメディア

クラウドサービス

jQueryでの子要素のfindとは?jQueryでの子要素の取得方法紹介!

2020年11月27日
SE
jQueryで子要素を取得するにはどうすればいいのですか。
PM
jQueryで子要素を取得するにはfindメソッドを使います。

jQueryでの子要素のfindとは?

今回は、jQueryでの子要素の取得方法について説明します。子要素の取得にはfindメソッドを使用します。

 

ここでは、「指定した子要素をfind」「id属性の子要素をfind」「class属性の子要素をfind」「name属性の子要素をfind」「複数属性の子要素をfind」「最初の子要素のみをfind」の6つについて紹介します。

 

jQueryでの子要素の取得方法に興味のある方はぜひご覧ください。

 

指定した子要素をfind

jQueryでは、指定した子要素をfindできます。ここでは、#findが付与されたdivを対象としてfindします。

 

 

 

実行結果は以下のようになります。

See the Pen
jquery_find1
by kskumd (@kskumd)
on CodePen.


find(‘p’)を指定することで、pタグをfindしていることが分かります。見やすさのために、.cssでつなげて文字色を赤に変更しています。

id属性の子要素をfind

jQueryでは、id属性を指定して子要素をfindできます。

 

 

 

実行結果は以下のようになります。

 

See the Pen
jquery_find2
by kskumd (@kskumd)
on CodePen.

 

find(‘#p1’)を指定することで、id属性が「p1」の要素を取得しています。

class属性の子要素をfind

jQueryでは、class属性を指定して子要素をfindできます。

 

 

 

実行結果は以下のようになります。

 

See the Pen
jquery_find3
by kskumd (@kskumd)
on CodePen.


find(‘.link’)を指定することで、class属性が「link」の要素を取得しています。

name属性の子要素をfind

jQueryでは、name属性を指定して子要素をfindできます。

 

 

 

実行結果は以下のようになります。

 

See the Pen
jquery_find4
by kskumd (@kskumd)
on CodePen.


find(‘[name=name1]’)を指定することで、name属性が「name1」の要素を取得しています。

複数属性の子要素をfind

jQueryでは、複数の属性を指定して子要素をfindできます。

 

 

 

実行結果は以下のようになります。

 

See the Pen
jquery_find5
by kskumd (@kskumd)
on CodePen.

最初の子要素のみをfind

jQueryでは、最初の子要素のみをfindできます。

 

 

 

実行結果は以下のようになります。

 

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のソースコードを書いて、理解を深めてください。


.NET分野でのキャリアアップをお考えの方は、現在募集中の求人情報をご覧ください。

また、直接のエントリーも受け付けております。

エントリー(応募フォーム)

Search

Popular

reccomended

Categories

Tags

Jobs