狼読

 

[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は、

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

まとめ

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

Profile Card

お空をかけるプログラマー

空のどこか
常時低空飛行のwebプログラマー 徒然なるままに情報を発信します。

関連記事

Related Post

2020/06/05

[jquery]クリック時に矢印を動かして展開したことがわかるアコーディオンの作り方

投稿カレンダー

2021年5月
 12
3456789
10111213141516
17181920212223
24252627282930
31  

Technology

category

©狼読