prev、prevAll、next、nextAll、parent などのメソッドを使用して現在の要素から相対的な位置関係の要素を取得する

prev、prevAll、next、nextAll、parent などのメソッドを使用して現在の要素から相対的な位置関係の要素を取得するサンプル コード例です。(Code Recipe | 逆引きサンプル コード)

prev、prevAll、next、nextAll、parent などのメソッドを利用することで、現在の要素を基点にして、その前、次など相対的な関係にある要素を取り出すことができます。

たとえば、以下のサンプルは、id 属性が "iam" である要素を基点として、兄弟要素や親子要素を取り出し、そのスタイルを変更する例です。 

<script type="text/javascript"> 
$(function(){
	$('#iam')  // id 属性が "iam" である要素を取得 
	.css('background-color', 'Yellow')  // 背景を黄色に 

	.children()  // 子要素群を取得 
	.css('font-weight', 'bold')  // フォントを太字に 
	.end()  // カレント要素を元の位置に 

	.prev()  // 直前の兄要素を取得 
	.css('background-color', 'Lime')  // 背景をライム色に 
	.end()  // カレント要素を元の位置に 

	.prevAll()  // すべての兄要素を取得 
	.css('color', 'Red')  // テキストを赤色に 
	.end()  // カレント要素を元の位置に 

	.prevUntil('.border')  // class 属性が "border" である兄要素まで取得 
	.css('font-style', 'italic')  // フォントを斜体に 
	.end()  // カレント要素を元の位置に 

	.next()  // 直後の弟要素を取得 
	.css('background-color', 'Aqua')  // 背景をアクア色に 
	.end()  // カレント要素を元の位置に 

	.nextAll()  // すべての弟要素を取得 
	.css('color', 'Blue')  // テキストを青色に 
	.end()  // カレント要素を元の位置に 

	.nextUntil('.border')  // class 属性が "border" である弟要素まで取得 (=該当なし) 
	.css('font-size', 'xx-small')  // フォントサイズを最小に 
	.end()  // カレント要素を元の位置に 

	.parent()  // 親要素を取得 
	.css('border', 'solid 1px Black');  // 黒の枠線を付与 
});
</script>
<div> 
	祖先 
	<div> 
	親 
	<div class="border">兄1</div> 
	<div>兄2</div> 
	<div id="iam"> 
	ぼく 
	<div>子供1</div> 
	<div>子供2</div> 
	</div> 
	<div class="border">弟1</div> 
	<div>弟2</div> 
</div>

祖先
親
兄1
兄2
ぼく
子供1
子供2
弟1
弟2

サンプルではそれぞれのメソッドでカレント要素を移動し、スタイル変更した後、基点 (id 属性が "iam") の要素に戻り、また移動して…という動作を繰り返しています。それぞれのメソッドの意味については、サンプル内のコメントを参照すれば直感的に理解できると思いますので、注意すべき点のみ以下に補足しておきます。

(1) prevUntil、nextUntil メソッドの境界

prevAll、nextAll は、セレクター式に合致する要素が見つかるまで、その兄/弟要素を取得します。ただし、セレクター式に合致した要素そのものは結果に含まれない点に注意してください。よって、サンプルでも「nextUntil('.border')」に合致する要素は存在しないことになります。

(2) その他のメソッドでセレクター式を指定した場合

prev/prevAll、next/nextAll、parents メソッドでも引数としてセレクター式を指定できます。その場合、たとえば prev メソッドであれば、直前の兄要素がセレクター式に合致した場合のみ取得しますし、prevAll メソッドであれば、セレクター式に合致した兄要素のみを取得します。 

<script type="text/javascript">
$(function(){
	$('#me')  // id 属性が "me" である要素を取得 
	.css('background-color', 'Yellow')  // 背景を黄色に 

	.prev('.new')  // 直前の兄要素が class="new" である場合のみ取得 (＝該当なし) 
	.css('background-color', 'Aqua')  // 背景をアクア色に 
	.end()  // カレント要素を元の位置に 

	.nextAll('.new')  // class="new" である弟要素を取得 
	.css('background-color', 'Lime');  // 背景をライム色に
});
</script>
<div>兄1</div> 
<div class="new">兄2</div> 
<div>兄3</div> 
<div id="me">ぼく</div> 
<div class="new">弟1</div> 
<div>弟2</div> 
<div class="new">弟3</div>

兄1
兄2
兄3
ぼく
弟1
弟2
弟3
msdn
inserted by FC2 system