【脱jQuery】.parents()で親要素よりも上の要素の取得をネイティブJavascriptに書き換え
2020.08.20 Posted by Coding_team
こんにちはウェブラボ技術メモです。
親要素よりも上の、先祖要素を取得したいときありますよね。そんなときjQueryの.parents()メソッドを使用して取得することができます。今回は.parents()メソッドの紹介と、ネイティブで書きたいマニアの方へ、Javascriptではどのように書けばいいのかご紹介します。
目次
jQuery「.parents()」メソッド
まず先にjQueryの「.parents()」メソッドの使用例を示します。
例:HTML
|
1 2 3 4 5 6 7 8 9 |
<div class="div1"> <div class="div2"> <div class="div3"> <div class="div4"> <div class="div5"></div> </div> </div> </div> </div> |
このようなHTMLにおいて、
div5からdiv1を取得したい場合、
例:jQuery
|
1 2 3 |
$(function(){ var div1=$(".div5").parents(".div1"); }); |
このように書くだけで取得できます。
似たようなもので、.parent()メソッドというものがありますが、これは直上の親要素を取得するメソッドであり、オーストラリアとオーストリアくらい違います。これを使い、
$(“.div5”).parent().parent()・・・のようにメソッドチェーンで先祖要素を取得することもできますが、HTML構造を守らないといけなくなるので、先祖の場合はparents()を使用したほうがいいでしょう。
Javascript「.closest()」メソッドでネイティブに書き換え
jQueryの「.parents()」メソッドの書き換えには、Javascriptの「.closest()」メソッドを使用します。
例:Javascript
|
1 |
var div1=document.getElementsByClassName("div5")[0].closest(".div1"); |
のように使用します。
「.closest([セレクター])」なので、クラスにはドットを付け忘れないようご注意ください。
ちなみに、.parent()メソッドの書き換えは.parentNodeです。
parentNodeとwhile文とかで探し出すのかな～なんて思ってましたが、.closest()なんてものがあったんですね！
どうしても先祖要素の取得が必要な場面はあるかと思います。ぜひお役立てください。
以上、.parents()と、書き換えJavascriptでした。
関連記事こちらの記事も合わせてどうぞ。
