jQueryで親要素を取得する方法｜parent・parents・closestの違い

jQueryでHTMLの親要素を取得する方法をまとめました。

結論から書くと、直近の親だけなら .parent()、条件に合う祖先を1つ探すなら .closest()、祖先をすべて集めるなら .parents() を使います。実務でいちばん出番が多いのは .closest() です。

▼メソッドの使い分け

メソッド	取得するもの	自分自身	件数
`.parent()`	直近の親1つだけ	含まない	1件
`.parents()`	祖先すべて	含まない	複数
`.closest()`	条件に合う最も近い祖先1つ	含む	0〜1件
`.parentsUntil()`	指定要素の手前までの祖先	含まない	複数

以下、それぞれの挙動をコード付きで解説します。素のJavaScriptで同じことをする書き方も添えました。

要素の親を取得する方法

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

結論：.parent() は、対象の要素の直接の親要素だけを取得します。1つ上しか見ません。

<div class="container">
  <p>これは親要素を取得する例です。</p>
</div>

const childElement = $('.container p');
const parentElement = childElement.parent();

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

引数にセレクタを渡すと、直近の親がその条件に合うときだけ取得します。合わなければ空になります。

// 直近の親が .container のときだけ取得される
$('.container p').parent('.container');

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

結論：.parents() は、対象の要素のすべての祖先要素を取得します。html 要素まで遡ります。

<div class="grandparent">
  <div class="parent">
    <p>これは祖先要素を取得する例です。</p>
  </div>
</div>

const childElement = $('.parent p');
const ancestorElements = childElement.parents();

ancestorElementsには<div class="parent">と<div class="grandparent">が、近い順に取得されます。実際にはさらに body と html も含まれます。

絞り込みたい場合はセレクタを渡します。

// div の祖先だけに絞る
$('.parent p').parents('div');

条件に合う最も近い祖先を取得する

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

結論：.closest() は、条件に合う祖先のうち最も近いものを1つだけ取得します。見つかった時点で遡るのをやめます。

.parents() との違いは2つあります。取得件数が最大1件であることと、自分自身も判定の対象に含まれることです。

<ul class="list">
  <li class="item">
    <button class="delete">削除</button>
  </li>
</ul>

$('.delete').on('click', function () {
  // 押されたボタンが属する li だけを消す
  $(this).closest('.item').remove();
});

クリックされた要素から、対応する行や項目を辿るというのは非常によくある処理です。この用途では .parents('.item').first() と書くより .closest('.item') のほうが速く、意図も明確になります。

自分自身が条件に合う場合は、自分自身が返ります。

// .item 自身をクリックしたら、その .item が返る
$('.item').closest('.item'); // → .item 自身

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

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="uncle">が取得されます。.uncle p から遡った経路にあるのは .uncle で、その次の .grandparent は停止条件なので含まれません。

取得されるのは「その要素から実際に遡った経路上の祖先」だけです。同じ階層にある別の要素（この例の .parent）は経路上にないため含まれません。ここは間違えやすいところなので、遡る道筋を意識して使ってください。

素のJavaScriptで同じことをする

結論：親要素の取得は、jQueryを読み込まなくても標準のDOM APIでできます。.closest() は同じ名前のメソッドがそのまま使えます。

▼jQueryと素のJavaScriptの対応

jQuery	素のJavaScript
`$(el).parent()`	`el.parentElement`
`$(el).closest('.item')`	`el.closest('.item')`
`$(el).parents()`	ループで `parentElement` を辿る
`$(el).parents('div')`	同上＋`matches('div')` で絞る

先ほどのボタンの例を素のJavaScriptで書くとこうなります。

document.querySelectorAll('.delete').forEach((button) => {
  button.addEventListener('click', () => {
    button.closest('.item').remove();
  });
});

closest() はすべての主要ブラウザが対応しています。親要素を辿るためだけにjQueryを読み込む必要はありません。

祖先をすべて集めたい場合は、ループで遡ります。

function getParents(el) {
  const result = [];
  let current = el.parentElement;
  while (current) {
    result.push(current);
    current = current.parentElement;
  }
  return result;
}

parentElement と parentNode は似ていますが、parentNode は要素以外（ドキュメント自体など）も返します。要素だけを辿りたいなら parentElement を使ってください。