[js]jqueryで親要素を取得する方法

今回は、jqueryで親要素を取得する方法をご紹介します。
親要素取れて何が嬉しいの？って思う方がいらっしゃる方がいると思いますが、例えば、メニューでサブメニューがあるかどうかなどを判別するときに使えたりします。

HTMLを準備をしよう

親要素を取得するためのhtmlを準備します。親要素があるサンプルを作成します

<div id="parent_sample">
 <div id="child_sample">親のIDは、</div>
</div>

上記のように作成します。親のIDの取得に成功したら、テキスト文の後ろにid名を入れていくようなものにいたしましょう。

jqueryで親要素を取得しよう

jqueryを使って親要素を取得しようと思います。
親要素を取得するためには、parentというものを使用します。

<script>
 var get_parent=$('#child_sample').parent().attr('id');
 var get_text=$('#child_sample').text();
 $('#child_sample').text(get_text + get_parent);
</script>

親要素のidを取得したサンプル実装例

上記のように親要素のIDを取得することに成功しましたね。
上記のスクリプト記述するときは、htmlのブロックより下に記述しないと取得できないので、記述するときは注意してください。

まとめ

jqueryで親要素の取得する方法をご紹介させていただきました。parent().parent()などを使用すると親の親要素を取得することはできますが、htmlの構造を変化させてしまうと、jqueryを変更しなければならないので、１つうえくらいの方が無難ですね。うまく使うならparents()などを使って親要素を全て取得してfindを使うことでその指定クラス、IDがあるのかと調べるなどで使うのが良いのではないでしょうか。