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します。

 

 

 

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

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