JavaScript

jQueryで親要素を取得する方法

jQueryを使用して、HTMLの親要素を取得する方法をまとめました。

要素の親を取得する方法

jQueryの.parent()メソッドを使用する方法

要素の親を直接取得するには、.parent()メソッドを使用します。このメソッドは、対象の要素の直接の親要素を取得します。以下は実装例です。

<div class="container">
  <p>これは親要素を取得する例です。</p>
</div>
const childElement = $('.container p');
const parentElement = childElement.parent();

 

parentElementには<div class="container">が取得されます。

 

jQueryの.parents()メソッドを使用する方法

.parents()メソッドは、対象の要素のすべての祖先要素を取得します。複数の祖先要素を取得したい場合に便利です。

<div class="grandparent">
  <div class="parent">
    <p>これは祖先要素を取得する例です。</p>
  </div>
</div>
const childElement = $('.parent p');
const ancestorElements = childElement.parents();

 

ancestorElementsには<div class="grandparent"><div class="parent">が取得されます。

 

要素の祖先を絞り込む方法

jQueryの.parentsUntil()メソッドを使用する方法

.parentsUntil()メソッドは、特定の要素に達するまでの祖先要素を取得します。指定した要素に達すると結果に含まれません。

<div class="grandparent">
  <div class="parent">
    <p>これは祖先要素を絞り込む例です。</p>
  </div>
  <div class="uncle">
    <p>別の親族要素</p>
  </div>
</div>
const childElement = $('.uncle p');
const ancestorElements = childElement.parentsUntil('.grandparent');

 

ancestorElementsには<div class="parent">が取得されますが、.grandparentは含まれません。

 

まとめ

jQueryを使用して、HTMLの親要素を取得する方法をまとめました。.parent()メソッドを使って直接の親を取得したり、.parents()メソッドを使ってすべての祖先を取得したり、.parentsUntil()メソッドを使って祖先を絞り込んだりすることができます。これらの方法を理解し、活用してみてください。

▼HTML/CSS/JavaScriptの学習本を探してる方はこちらの記事をどうぞ

2023年版 Webコーディングにオススメの学習本【HTML/CSS/JavaScript】この記事では、初心者から中級者以上まで、Webコーディングの学習にオススメの学習本をご紹介します。この記事で紹介する本は、分かりやすい解説や実践的な例題、デザインや解説図など、学習をサポートするいろんな要素が含まれている本を選びました。ぜひ、自分に合った本を見つけて、ウェブ制作のスキルを磨いてみてください。...

 

ABOUT ME
りん
沖縄から福岡に移住。QA/Webデザイナー/SE/フリーランス/SE人事など。趣味や好きなことをブログにまとめてます。