jQueryのparent(), parents(), closest()関数：使い分けと代替方法の完全ガイド

2024-05-17

jQuery の parent(), parents(), closest() 関数の違い：分かりやすい解説

それぞれの機能

parent(): 指定された要素の 直接親要素 のみを返します。
parents(): 指定された要素の すべての親要素 を返します。最上位の親要素 (ドキュメント要素) まで遡ります。
closest(): 指定された要素から 最も近い一致する親要素 を返します。要素自身も対象となります。

具体的な例

以下の HTML 構造を例に考えてみましょう。

<div id="container">
  <ul>
    <li id="item1">アイテム1</li>
    <li id="item2">アイテム2</li>
  </ul>
</div>

parent():
- $("#item1").parent(): <ul> 要素を返します。

使い分けのポイント

直接親要素のみが必要な場合: parent() を使用します。
特定の条件に合致する親要素を見つけたい場合: closest() を使用します。

まとめ

parent(): 直接親要素のみを取得
closest(): 特定の条件に合致する親要素を取得

それぞれの関数の機能を理解し、状況に応じて使い分けることで、jQuery による DOM 操作を効率的に行うことができます。

jQuery の parent(), parents(), closest() 関数のサンプルコード

HTML

<div id="container">
  <ul id="list">
    <li id="item1">アイテム1</li>
    <li id="item2">アイテム2
      <ul id="sublist">
        <li id="subitem1">サブアイテム1</li>
        <li id="subitem2">サブアイテム2</li>
      </ul>
    </li>
  </ul>
</div>

JavaScript

$(document).ready(function() {
  // parent() の例
  console.log($("#item1").parent().text()); // "アイテム1" と出力
  console.log($("#subitem2").parent().text()); // "サブアイテム2" と出力

  // parents() の例
  console.log($("#item1").parents().get().reverse()); // ["#list", "#container"] の順に出力
  console.log($("#subitem2").parents().get().reverse()); // ["#sublist", "#list", "#container"] の順に出力

  // closest() の例
  console.log($("#subitem2").closest("ul").text()); // "サブアイテム1 サブアイテム2" と出力
  console.log($("#subitem2").closest("#list").text()); // "アイテム1 アイテム2" と出力
});

説明

上記のコードは、まず $(document).ready() 関数内で、DOM がロードされた後に実行される処理を記述しています。
それぞれの例では、各関数を console.log() で出力することで、返される要素を確認しています。
get() メソッドを使用すると、返される要素を配列として取得できます。
reverse() メソッドを使用すると、配列の順番を反転できます。

このサンプルコードを参考に、それぞれの関数の挙動を実際に試しながら理解を深めてみてください。

jQuery 以外での代替方法

近年、ブラウザの JavaScript エンジンは高速化しており、jQuery を使用するよりもネイティブ JavaScript で DOM 操作を行う方がパフォーマンスが優れる場合があります。

以下の例は、ネイティブ JavaScript で parent(), parents(), closest() 関数と同等の機能を実現する方法を示しています。

// parent()
function parent(element) {
  return element.parentNode;
}

// parents()
function parents(element) {
  const parents = [];
  let currentElement = element;
  while (currentElement !== null) {
    parents.push(currentElement);
    currentElement = currentElement.parentNode;
  }
  return parents.reverse();
}

// closest()
function closest(element, selector) {
  let currentElement = element;
  while (currentElement !== null && !currentElement.matches(selector)) {
    currentElement = currentElement.parentNode;
  }
  return currentElement;
}