jQueryで親要素の取得についてまとめました。parent()・parents()・closest()の使い方と使い分けについても解説していきます。「同じようなメソッドが3つもあるので、どれを使っていいのかわからない」なんて疑問もこの記事を見れば解決です。
3つのメソッドについて簡単にまとめると次のようになります。
| parent([seletcor]) | 1個上の親要素を取得するならこれ |
| parents([seletcor]) | 上の階層の要素をまとめて取得したいならこれ |
| closest(seletcor) | 上の階層の直近の要素(自分自身を含む)を探したいならこれ |
parent()メソッドとは？
ある要素の1個上の階層である親要素を取得するためのメソッドです。
それでは具体例を見ていきましょう。
<div class="wrap">
<div class="container">
<div class="contents">
<h2>見出し</h2>
<div id="child">私自身</div>
</div>
</div>
</div>ある要素「#child」の親要素である「div.contents」を取得してみます。
<script>
$('#child').parent();
</script>
結果：
-> [<div class="contents">...</div>]この様に親要素は1つしかないので、取得できる要素も1つだけになります。
parents()メソッドとは？
ある要素の上の階層にあるすべての親要素をまとめて取得する事ができるメソッドです。メソッドにはセレクターを指定できるので、特定の要素を狙い撃ちで取得することも可能です。
それでは例を見ていきましょう。
<script>
$('#child').parents();
</script>
結果：
-> [<div class="contents">..</div>, <div class="container">..</div>,
<div class="wrap">..</div>, <body>..</body>, <html>..</html>]この様にセレクターを指定しなかった場合、html要素に至るすべての親要素を取得することが出来ます。
次はセレクターを指定したときの例です。
<script>
$('#child').parents('.container');
</script>
結果：
-> [<div class="container">..</div>]結果は「div.container」が取得できました。
closest()メソッドとは？
ある要素の上の階層にあるすべての親要素の中から、特定の要素を取得する事ができるメソッドです。メソッドにはセレクターを指定します。parents()メソッドと似ていますが、closest()メソッドは、すべての親要素の中から特定の要素を取得する事に特化したメソッドと言えます。
それでは例を見ていきましょう。
<script>
$('#child').closest('.container');
</script>
結果：
-> [<div class="container">..</div>]parents()メソッドと同じ結果となりました。但し、closest()の場合要素を1つずつ調べていき、最初に合致した要素のみが取得できます。
closest()メソッドの注意点
closest()メソッドには注意点があります。次は最初に合致するdiv要素を取得しようとした例です。
<script>
$('#child').closest('div');
</script>
結果：
-> [<div id="child">..</div>]結果は自分自身である「div#child」が取得されてしまいました。つまり、closest()メソッドは、自分自身から調べはじめ、上の階層に向かって調べていくという挙動を見せるのです。ですので、こういった場合にはparents()メソッドを使いましょう。
h2要素のテキストの値を取得する例
最後に「#child」の兄弟要素である「h2要素」にあるテキストの値を取得する具体例を見ていきましょう。
<script>
$('#child').parent().find('h2').text();
</script>
結果：
-> '見出し'find()メソッドは、ある要素の下の階層にあるすべての子要素を取得するためのメソッドです。
おわりに
jQueryのparent()・parents()・closest()を使った親要素の取得方法の解説は以上です。それぞれのメソッドの違いや注意点について理解してもらえましたでしょうか。
