JavaScript jQuery プログラミング

【 jQuery 】子要素を取得する方法 ( children / find / セレクタ)

今回はjQueryで要素内の子要素を取得する方法を数パターン解説していきます。

子要素の取得(children)

childrenメソッドは対象となる要素内のすべての子要素を取得してくれます。

また、メソッドの引数でセレクタを指定することで取得する子要素を絞り込むことも可能です。

HTML

<div id="parent">
 <p>--1--</p>
  <p>--2--</p>
  <img src="picture1.jpg"/>
  <img src="picture2.jpg"/>
</div>

jQuery

$('parent').children('img');

子要素、子孫要素の取得(find)

findメソッドは対象となる要素内の子要素だけでなく、子孫要素(子要素の子要素)からも要素を取得することができます。

childrenメソッドよりも要素の取得範囲が広いです。

HTML

<div id="parent">
 <p>--1--</p>
 <img src="picture1.jpg"/>
 <div id="child">
   <p>--2--</p> 
   <img src="picture2.jpg"/>
  <img class="child-picture" src="picture2.jpg"/>
 </div>
</div>

jQuery

$('parent').find('.child-picture');

セレクタで子要素の取得

メソッドではないですが、セレクタを指定するだけでも子要素を取得することができます。

HTML

<div id="parent">
 <p>--1--</p>
  <p>--2--</p>
</div>

jQuery

$("#parent p");

おすすめ記事はコチラ

スマレジ テックファーム 1

スマレジ テックファーム で Webエンジニアとして勤めている tomoです。 今回は株式会社スマレジや私が所属している 「 スマレジ テックファーム 」についてPRしていきたいと思います。 スマレジ ...

2

FromBody 属性を使用して、 ASP.NET Core(.NET 6)のWebAPIでBodyパラメータのJSONを受け取る方法を解説します。 FromBody 属性 POSTやGETで呼び出さ ...

PC picture 3

ASP.NET Core(.NET 6)でCookie認証のタイムアウトを設定する方法を解説します。 Cookieの有効期限について Cookieには通常はタイムアウト(有効期限)を設定します。 基本 ...

4

ASP.NET Core(.NET 6)でクロスオリジンリクエスト ( CORS )を設定する方法を解説します。 簡単に クロスオリジンリクエスト ( CORS )とは何かについても少し解説したいと思 ...

-JavaScript, jQuery, プログラミング
-, ,