【脱jQuery】.parents()で親要素よりも上の要素の取得をネイティブJavascriptに書き換え

2126351_sこんにちはウェブラボ技術メモです。
親要素よりも上の、先祖要素を取得したいときありますよね。そんなときjQueryの.parents()メソッドを使用して取得することができます。今回は.parents()メソッドの紹介と、ネイティブで書きたいマニアの方へ、Javascriptではどのように書けばいいのかご紹介します。
 

  1. jQuery「.parents()」メソッド
  2. Javascript「.closest()」メソッドでネイティブに書き換え

 

jQuery「.parents()」メソッド

まず先にjQueryの「.parents()」メソッドの使用例を示します。

例:HTML

 
このようなHTMLにおいて、
div5からdiv1を取得したい場合、

例:jQuery

 
このように書くだけで取得できます。
似たようなもので、.parent()メソッドというものがありますが、これは直上の親要素を取得するメソッドであり、オーストラリアとオーストリアくらい違います。これを使い、
$(“.div5″).parent().parent()・・・のようにメソッドチェーンで先祖要素を取得することもできますが、HTML構造を守らないといけなくなるので、先祖の場合はparents()を使用したほうがいいでしょう。
 

Javascript「.closest()」メソッドでネイティブに書き換え

jQueryの「.parents()」メソッドの書き換えには、Javascriptの「.closest()」メソッドを使用します。
 

例:Javascript

 
のように使用します。
「.closest([セレクター])」なので、クラスにはドットを付け忘れないようご注意ください。
 
ちなみに、.parent()メソッドの書き換えは.parentNodeです。
parentNodeとwhile文とかで探し出すのかな~なんて思ってましたが、.closest()なんてものがあったんですね!
どうしても先祖要素の取得が必要な場面はあるかと思います。ぜひお役立てください。
 
以上、.parents()と、書き換えJavascriptでした。

【脱jQuery】.parents()で親要素よりも上の要素の取得をネイティブJavascriptに書き換え はコメントを受け付けていません
  • このページを共有する

関連記事こちらの記事も合わせてどうぞ。