JQueryで親要素、子要素、孫要素を取得する

JQueryを使って、親要素や子要素、孫要素を取得する方法

◾︎親要素の取得

1	$('セレクタ').parent('条件');

指定したセレクタのすぐ上の親要素を取得します。
$('#example').parent('div');
#exampleの親要素がdivだったら親要素が取得できます。でなければnoneを返します。

1	$('セレクタ').parents('条件');

.parentと違い、指定したセレクタの親よりさらに上の要素を取得できます。
$('#example').parent('.sample');
#exampleより上の.sampleと名前がついたclassを取得します。

1	$('セレクタ').closest('条件');

指定したセレクタから最も近い親要素を取得します。引数に条件を指定した場合、マッチする最も近い親要素を返します。一致しない場合は、noneを返します。
$('#example').closest('div');
#exampleより最も近いdivを取得します。間に他の要素があっても無視されます。

◾︎子要素の取得

1	$('セレクタ').contens();

指定したセレクタのテキストノードも含めた全子要素を取得します。※条件はしていできません
※テキストノードとはタグ要素以外の文字要素のこと（※あくまでざっくり言うと）

1	$('セレクタ').children();

指定したセレクタ内の子要素を取得します。※孫要素は取得できません。
$('#example').children('span');
#example内の子要素（span）を取得します。なけれなnoneを返します。

1	$('セレクタ').find();

指定したセレクタ内の条件に一致した全子孫要素を取得する。
$('#example').find('span');
#example内の全子孫要素（span）を取得します。なけれなnoneを返します。

◾︎自分以外の隣を含む（兄弟）要素の取得

1	$('セレクタ').next();

指定したセレクタ（自分以外）の１つ後の兄弟要素を取得します。

1	$('セレクタ').nextAll();

指定したセレクタ（自分以外）の全ての後の兄弟要素を取得します。

1	$('セレクタ').prev();

指定したセレクタ（自分以外）の１つ前の兄弟要素を取得します。

1	$('セレクタ').prevAll();

指定したセレクタ（自分以外）の全ての前の兄弟要素を取得します。