jQueryで親・先祖要素の取得方法

jQueryで親・先祖要素の取得方法のご紹介です。
例えばリストの中の「a」や「ｐ」タグをクリックした時に
親要素のリストに何かアクションが必要な時などに便利な方法です！

親要素の取得

HTMLの「a」タグの親要素を取得する方法を例にして、親要素の取得方法のご紹介です。
また、DEMOでは「a」タグを押したら、その押された親要素を削除しています。

HTML

<ul>
  <li><a class="child1">１</a></li>
  <li><a class="child2">２</a></li>
  <li><a class="child3">３</a></li>
</ul>

jQuery

var element = $(".child1").parent();
// 「element」に「.child1」の親要素「li（0番目）」が格納されます。

DEMO

下のリストの「a」タグを押すと、親要素の「li」を削除します。

先祖要素の取得

HTMLの「a」タグの先祖要素を取得する方法を例にして、先祖要素の取得方法のご紹介です。
先祖要素の取得は、親要素の一つ上の要素だけでなく、もっとも～っと上の要素、例えば「body」なんかも指定可能です。
「body」を指定するなら、そのまま「$(“body”)」で指定出来ちゃいますけどね！
たまに難しく考えすぎて、難解なコードになりがちなので気を付けたい所です。

HTML

<ul class="ancestor">
  <li><a class="child1">１</a></li>
</ul>

jQuery

var element = $(".child1").parents(".ancestor");
// 「element」に「.child1」の先祖要素「.ancestor」が格納されます。

DEMO

下のリストの「a」タグを押すと、先祖要素の「ul」を削除します。

一番近くにある親や先祖要素の取得

最後に例外ではありますが、親要素でも先祖要素でも近くの要素を取得する方法のご紹介です。
一番近くにある親や先祖要素の取得は、タグを選択する時に便利。
今回は先祖要素の「ul」タグの取得を例にして紹介します。

HTML

<ul>
  <li><a class="child1">１</a></li>
</ul>

jQuery

var element = $(".child1").closest("ul");
// 「element」に「.child1」の先祖要素「ul」が格納されます。