今回は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");