デモページはこちら

jQueryで子孫要素（子要素と子要素の子要素である孫要素）を取得するメソッドのまとめです。対象要素の子要素を全て取得するchildren、対象要素の子要素と孫要素を全て取得するfindです。またセレクタのみで子要素を取得することもできます。

以下のhtmlの構造でテストします。

<div class="contents">
	<p class="title">タイトルデモ</p>
	<p>ダミーテキスト01</p>
	<p>ダミーテキスト02</p>
	<p>ダミーテキスト03</p>
	<div class="image">
		<img src="images/img01.jpg" alt="">
		<img src="images/img02.jpg" alt="">
		<img src="images/img03.jpg" alt="">
		<img src="images/img04.jpg" alt="">
	</div>
	<p>ダミーテキスト04</p>
	<p>ダミーテキスト05</p>
</div>

子孫要素を取得できる各メソッドを利用してconsole.logで出力します。childrenは子要素全てを取得しますが、result02のように指定した順番の子要素だけを取得することもできます。result03のようにfirstメソッドを利用しても同様です。result05はセレクタのみで子要素を取得しています。attrメソッドはセレクタで複数の要素にマッチしても最初の要素しか取得できないため、eachを利用して全て出力しています。

$(function() {
	var result01 = $('.contents').children('p');
	var result02 = $('.contents').children('p:first'); //最初の子要素を取得
	var result03 = $('.contents').children('p').first(); //最初の子要素を取得
	var result04 = $('.contents').find('img');
	var result05 = $('.contents .title');

	console.log(result01.text());
	console.log(result02.text());
	console.log(result03.text());
	result04.each(function() {
		console.log($(this).attr('src'));
	});
	console.log(result05.text());
});

//result01
タイトルデモダミーテキスト01ダミーテキスト02ダミーテキスト03ダミーテキスト04ダミーテキスト05
//result02
タイトルデモ
//result03
タイトルデモ
//result04
images/img01.jpg
images/img02.jpg
images/img03.jpg
images/img04.jpg
//result05
タイトルデモ