デモページはこちら

jQueryで親要素（親要素の親要素である先祖要素を含む）を取得するメソッドのまとめです。対象要素の親要素を取得するparent、対象要素の親要素と先祖要素を全て取得するparents、対象要素の親要素と先祖要素から最初にマッチした要素を取得するclosestです。

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

<div class="contents" id="page01">
	<p class="title">タイトルデモ01</p>
	<div class="text">
		<p class="text01">ダミーテキスト01</p>
		<p class="text02">ダミーテキスト02</p>
		<p class="text03">ダミーテキスト03</p>
	</div>
	<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 class="title">タイトルデモ02</p>
	<div class="text">
		<p class="text04">ダミーテキスト04</p>
		<p class="text05">ダミーテキスト05</p>
	</div>
</div>

親要素を取得できる各メソッドを利用してconsole.logで出力します。$('.text05').closest('div')は対象のdivタグがクラス名textのdivタグとクラス名contentsのdivタグ2つありますが、最初にマッチしたクラス名textのdivタグのみ取得するのがポイントです。

$(function() {
	var result01 = $('.text03').parent().prev();
	var result02 = $('.text04').parents('.contents');
	var result03 = $('.text05').closest('div').prev();

	console.log(result01.text());
	console.log(result02.attr('id'));
	console.log(result03.text());
});

//result01
タイトルデモ01
//result02
page01
//result03
タイトルデモ02