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

javascript
この記事は約3分で読めます。
スポンサーリンク

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

親要素の取得

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

HTML

<ul>
  <li><a class="child1">1</a></li>
  <li><a class="child2">2</a></li>
  <li><a class="child3">3</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">1</a></li>
</ul>

jQuery

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

DEMO

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

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

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

HTML

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

jQuery

var element = $(".child1").closest("ul");
// 「element」に「.child1」の先祖要素「ul」が格納されます。
SNSフォローボタン
エンデ・バタローをフォローする
javascriptjQueryサイト制作

東京に住み始めて4年目。

前は神戸に。その前は名古屋に住んでいました。

ある年の冬、車で島根県へ旅行に出かけました。
同県の山中にある寒村をゆるゆると走っていると地面が凍結しており
車ごと川に滑り落ちそうになった経験を持つ30才(男)です。

フロントエンドを始めて4年目になります。
エディタはAtomを利用して、日々の業務でイラレとフォトショ、HTMLとCSSとjavascriptとphpを使用してます。
仕事をしていて、検索する手間を省くためフロント技術ブログを書いています。

エンデ・バタローをフォローする
シェアする
スポンサーリンク
初めてのブログ

コメント

タイトルとURLをコピーしました