jQuery-親要素・子要素・兄弟要素を取得する

jQueryを使えば、指定した要素に対し、直前/直後の兄弟要素や親子関係にある要素を取得することが出来ます。
class名が付いていなかったり、タグが特定できない場合に便利です。

兄弟要素を取得する

prev() 直前の要素を取得する

prev()は直前の兄弟要素を取得します。
サンプルでは .wrap の直前のdiv要素に対し、CSSを追加しています。

<ul>
	<li>取得されません</li>
	<li>取得されません</li>
</ul>

<!--ここから取得-->
<div>
	<h2>ここのタイトルが赤くなります</h2>
	<p>ここのテキストが赤くなります</p>
	<p>ここのテキストが赤くなります</p>
</div>
<!--ここまで取得-->

<div class="wrap">
	<h2>タイトル</h2>
	<p>取得されません</p>
	<p>取得されません</p>
</div>

<script>
$(function(){
	$('.wrap').prev().css('color','red'); 
});
</script>

prev(‘要素名’) 前の要素を絞り込んで取得

prev()は直前の要素名を指定することもできます。
サンプルでは .wrap の直前のdiv要素を取得してCSSを追加していますが、仮に直前の要素がdivではなかった場合、CSSは反映されません。

<ul>
	<li>取得されません</li>
	<li>取得されません</li>
</ul>

<!--ここから取得-->
<div>
	<h2>ここのタイトルが赤くなります</h2>
	<p>ここのテキストが赤くなります</p>
	<p>ここのテキストが赤くなります</p>
</div>
<!--ここまで取得-->

<div class="wrap">
	<h2>取得されません</h2>
	<p>取得されません</p>
	<p>取得されません</p>
</div>

<script>
$(function(){
	$('.wrap').prev('div').css('color','red'); 
});
</script>

prevAll() 前の全ての兄弟要素

prevAll()は直前の全ての兄弟要素を取得します。
サンプルでは .wrap より前のul、div要素に対しCSSを追加しています。

<!--ここから取得-->
<ul>
	<li>ここのテキストが赤くなります</li>
	<li>ここのテキストが赤くなります</li>
</ul>

<div>
	<h2>ここのタイトルが赤くなります</h2>
	<p>ここのテキストが赤くなります</p>
	<p>ここのテキストが赤くなります</p>
</div>
<!--ここまで取得-->

<div class="wrap">
	<h2>取得されません</h2>
	<p>取得されません</p>
	<p>取得されません</p>
</div>

<script>
$(function(){
	$('.wrap').prevAll().css('color','red'); 
});
</script>

next() 次の要素

next()は次の要素を取得します。
サンプルでは .wrap の直後の要素のdivに対し、CSSを追加しています。

<div class="wrap">
	<h2>取得されません</h2>
	<p>取得されません</p>
	<p>取得されません</p>
</div>

<!--ここから取得-->
<div>
	<h2>ここのタイトルが赤くなります</h2>
	<p>ここのテキストが赤くなります</p>
	<p>ここのテキストが赤くなります</p>
</div>
<!--ここまで取得-->

<ul>
	<li>取得されません</li>
	<li>取得されません</li>
</ul>

<script>
$(function(){
	$('.wrap').next().css('color','red');
});
</script>

next(’要素名’) 次の要素を絞り込んで取得

next()は直後の要素名を指定することもできます。
サンプルでは .wrap の直後のdiv要素を取得してCSSを追加していますが、仮に直後の要素がdivではなかった場合、CSSは反映されません。

<div class="wrap">
	<h2>タイトル</h2>
	<p>テキストテキスト</p>
	<p>テキストテキスト</p>
</div>

<!--ここから取得-->
<div>
	<h2>ここのタイトルが赤くなります</h2>
	<p>ここのテキストが赤くなります</p>
	<p>ここのテキストが赤くなります</p>
</div>
<!--ここまで取得-->

<div>
<h2>取得されません</h2>
	<p>取得されません</p>
	<p>取得されません</p>
</div>

<script>
$(function(){
	$('.wrap').next(’div’).css('color','red');
});
</script>

nextAll() 次の全ての兄弟要素

nextAll()は直後の全ての兄弟要素を取得します。
サンプルでは .wrap より後のul、div要素に対しCSSを追加しています。

<div class="wrap">
	<h2>取得されません</h2>
	<p>取得されません</p>
	<p>取得されません</p>
</div>

<!--ここから取得-->
<div>
	<h2>ここのタイトルが赤くなります</h2>
	<p>ここのテキストが赤くなります</p>
	<p>ここのテキストが赤くなります</p>
</div>

<ul>
	<li>ここのテキストが赤くなります</li>
	<li>ここのテキストが赤くなります</li>
</ul>
<!--ここまで取得-->

<script>
$(function(){
	$('.wrap').nextAll().css('color','red');
});
</script>

親要素を取得

parent() 1階層上の親要素を取得

parent()は1つ上の親要素を取得します。
サンプルでは、h2の親であるdiv.wrap2に対してCSSを追加しています。

<div class="wrap1">
	<p>取得されません</p>
	<!--ここから取得-->
	<div class="wrap2">
		<h2>ここのタイトルが赤くなります</h2>
		<p>ここのテキストが赤くなります</p>
		<p>ここのテキストが赤くなります</p>
	</div>
	<!--ここまで取得-->
</div>

<script>
$(function(){
	$('h2').parent().css('color','red'); 
});
</script>

parent(‘要素名’) 親要素を絞り込んで取得

parent()は親の要素を指定することもできます。
サンプルではh2の親のdiv要素を取得し、CSSを追加していますが、親がdivでなかった場合はCSSは反映されません。

<div class="wrap1">
	<p>ここのテキストは変わりません</p>
	<!--ここから取得-->
	<div class="wrap2">
		<h2>ここのタイトルが赤くなります</h2>
		<p>ここのテキストが赤くなります</p>
		<p>ここのテキストが赤くなります</p>
	</div>
	<!--ここまで取得-->
</div>

<script>
$(function(){
	$('h2').parent('div').css('color','red'); 
});
</script>

parents() 上位階層の全親要素を取得

前項と似た名前なので紛らわしいのですが、こちらはparents()で複数形です。全ての親要素を取得します。
サンプルではh2の親要素全て .wrap1 .wrap2 .wrap3 が対象になります。

<!--ここから取得-->
<div class="wrap1">
	<p>ここのテキストが赤くなります</p>
	<div class="wrap2">
		<p>ここのテキストが赤くなります</p>
		<div class="wrap3">
			<h2>ここのタイトルが赤くなります</h2>
			<p>ここのテキストが赤くなります</p>
			<p>ここのテキストが赤くなります</p>
		</div>
	</div>
</div>
<!--ここまで取得-->

<script>
$(function(){
	$('h2').parents().css('color','red'); 
});
</script>

parents(‘要素名’) 上位階層の全親要素から絞り込んで取得

parents(‘要素名’)で取得する親要素を絞り込むことも可能です。
サンプルでは親要素を.wrap2と指定しているので、.wrap2で囲われた部分のみにCSSが適用されます。

<div class="wrap1">
	<p>取得されません</p>
	<!--ここから取得-->
	<div class="wrap2">
		<p>ここのテキストが赤くなります</p>
		<div class="wrap3">
			<h2>ここのタイトルが赤くなります</h2>
			<p>ここのテキストが赤くなります</p>
			<p>ここのテキストが赤くなります</p>
		</div>
	</div>
	<!--ここまで取得-->
</div>

<script>
$(function(){
	$('h2').parents('.wrap2').css('color','red'); 
});
</script>

子要素を取得

children() 全ての子要素を取得

children()は全ての子要素を取得します。
サンプルでは.wrapの子要素である直後のp、div、孫要素のh2、pにCSSが追加されます。

<div class="wrap">
<!--ここから取得-->
	<p>ここのテキストが赤くなります</p>
	<div>
		<h2>ここのタイトルが赤くなります</h2>
		<p>ここのテキストが赤くなります</p>
		<p>ここのテキストが赤くなります</p>
	</div>
<!--ここまで取得-->
</div>

<script>
$(function(){
	$('.wrap').children().css('color','red');
});
</script>

children(‘要素名’) 指定した要素の子要素を取得

children(‘要素名’)で取得する子要素を絞り込むことも可能です。
サンプルでは.wrapの子要素のpタグにだけCSSが追加されるようにしています。
孫要素は取得しないので、仮にh2を指定しても取得できません。

<div class="wrap">
	<!--ここから取得-->
	<p>ここのテキストが赤くなります</p>
	<!--ここまで取得-->
	<div>
		<h2>取得されません</h2>
		<p>取得されません</p>
		<p>取得されません</p>
	</div>
</div>

<script>
$(function(){
	$('.wrap').children('p').css('color','red');
});
</script>

find(‘要素名’) 全子孫要素から指定した要素を取得

find(‘要素名’)は、指定した要素を全ての子孫要素から取得します。
サンプルでは、.wrapの子孫のpタグのみにCSSが追加されるようにしています。

<div class="wrap">
	<!--ここから取得-->
	<p>ここのテキストが赤くなります</p>
	<!--ここまで取得-->
	<div>
		<h2>取得されません</h2>
		<!--ここから取得-->
		<p>ここのテキストが赤くなります</p>
	  	<p>ここのテキストが赤くなります</p>
		<!--ここから取得-->
  	</div>
</div>

<script>
$(function(){
	$('.wrap').find('p').css('color','red');
});
</script>