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");

おすすめ記事はコチラ

ASP.NET Web Forms 1

この記事ではマイクロソフト社が開発・提供しているWebアプリケーション開発用フレームワーク「ASP.NET」の「Web Forms」を「MVC」と比較しながらメリットやデメリット等を含めて解説していき ...

C#VB 2

今回はC#(ver.7.0以降)、VB(ver. 15以降)でforeachループ内で繰り返し回数を参照する方法について解説していきます。 従来の記述方法とよりスマートに記述する方法の2通りを以下にな ...

3

この記事ではSQL Serverで使用できる「STUFF」という便利な関数の使い方について、解説していきます! 他にも便利な関数があれば、別記事にて使用方法を解説していきたいと思います! STUFF ...

4

今回はSQL ServerでデータをXML形式で取得する方法について書いていきます。 FOR XML PATH SQL Serverには「FOR XML PATH」という関数があって、SQL分の末尾に ...

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