【初心者jQuery】parent()・parents()・closest()の違いを調べてみた

自分自身から見て、上の階層にある要素を相対的に取得したい場合に使える、parent()・parents()・closest()。
その違いってなんなのか。

・parent()は、ひとつ上の要素だけ。
・parents()は、全部の要素をとっちゃう。
・closest()は、直近の要素のみ。

特にparets()とclosest()の違いがよく分からなかったので、いろいろと実験してみました。
結果、簡単にまとめるとこんな感じ。

・parents()は、ページ全部さかのぼって対象要素を全て取得する。
・closest()は、指定の要素が見つかるまでさかのぼり、見つけたらそこでサーチは終わり。

例えば、jqueryでborderをつけてみると、よくわかります。

こんなhtmlがある場合。
[html]
<div>
要素1
　　<div>
　　要素2
　　　　<div>
　　　　<p class="btn01">ボタン</p>
　　　　</div>
　　</div>
</div>
[/html]

↓parents(‘div’)だと全部のdivにborderが付く。
[html]
$(function(){
$(‘.btn01’).on(‘click’,function(){
$(this).parents(‘div’).css(‘border’,’1px solid #000000′);
});
});
[/html]

↓closest(‘div’)だと、ひとつ上のdivにだけborderが付きます。
[html]
$(function(){
$(‘.btn01’).on(‘click’,function(){
$(this).closest(‘div’).css(‘border’,’1px solid #000000′);
});
});
[/html]

closestだと、divを見つけ次第、そこでサーチが終わっていることがわかります。

もちろん指定には、classも使えるので、closest(‘.text’)みたいな記述もできます。

同じ要素をピンポイントで取りたいなら、見つかり次第サーチを完了させるclosest()を使った方が処理が軽そうでよさそうな雰囲気。

ちなみに、parent()を使う場合。
parent().parent().parent()と記述すると、3階層上がれるわけですが、これだとhtmlの構造が変わった場合、修正する必要が出てくるので、複数の階層を上がる場合はparents()かclosest()を使うのが良いようです。