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の学習本を探してる方はこちらの記事をどうぞ