任意の要素から別要素へ相対的にアクセスする

[メモ]
取得したjQueryオブジェクトから、更に相対的に別の要素へとアクセスしたい場合。parent()、parents()、children()、siblings()、prev()、next()等の関数を使用する。パラメータにはjQuery expressionを使用可能。find()は強力。

$(function(){
	$('input[@type="button"]').click(function() {
		//var value = $(this).siblings('input[@type="radio"]:checked').attr('value');
		//var value = $(this).parent().children('input[@type="radio"]:checked').attr('value');
		var value = $(this).parent().find('input[@type="radio"]:checked').attr('value');
		alert(value)
	});
});

<form>
	<p>
		<input name="group1" type="radio" value="Flash" checked="checked" />Flash 
		<input name="group1" type="radio" value="Dreamweaver" />Dreamweaver 
		<input name="group1" type="radio" value="Fireworks" />Fireworks<br />
		<input type="button" value="グループ1の値を取得" />
	</p>
	<p>
		<input name="group2" type="radio" value="Photoshop" checked="checked" />Photoshop 
		<input name="group2" type="radio" value="Illustrator" />Illustrator 
		<input name="group2" type="radio" value="AfterEffects" />AfterEffects<br />
		<input type="button" value="グループ2の値を取得" />
	</p>
</form>