jQuery 遍歴 - parents() メソッド

jQuery 遍历参考手册

インスタンス

各 b 要素のすべての親要素を検索します：

$("b").parents()

自分で試してみてください

定義と用法

parents() は、現在のマッチングされた要素集合の各要素の祖先要素を取得します。選択子を使用してフィルタリングするのは任意です。

.parents()selector)
パラメータ 説明
selector 要素に一致するための選択子表現を含む文字列値。

詳細な説明

DOM要素集合を表すjQueryオブジェクトが与えられた場合、.parents()メソッドはDOM木内でこれらの要素の祖先要素を検索し、最も近い親要素から上方向に並べ替えた一致する要素で構成された新しいjQueryオブジェクトを作成します。要素は最も近い親要素から外方向に順に返されます。.parents()と .parent() メソッドは似ていますが、後者はDOM木を上方向に単一レベルで遍历します。

このメソッドは、$()関数に渡すパラメータの種類と同じ選択子表現をオプションで受け入れます。この選択子を適用すると、要素がその選択子に一致するかどうかを検出し、要素をフィルタリングします。

基本的なネストリストを持つページを考えてみてください：

<ul class="level-1">
  <li class="item-i">I</li>
  <li class="item-ii">II
    <ul class="level-2">
      <li class="item-a">A</li>
      <li class="item-b">B
        <ul class="level-3">
          <li class="item-1">1</li>
          <li class="item-2">2</li>
          <li class="item-3">3</li>
        </ul>
      </li>
      <li class="item-c">C</li>
    </ul>
  </li>
  <li class="item-iii">III</li>
</ul>

プロジェクト Aから始める場合、その祖先要素を見つけることができます：

$('li.item-a').parents().css('background-color', 'red');

自分で試してみてください

この呼び出しの結果は、level-2 リスト、項目 II および level-1 リストなどの要素（DOM木を上方向に<html>まで）に赤い背景を設定します。選択子表現を適用していないため、親要素が自然とオブジェクトの一部となります。選択子を適用すると、要素が選択子に一致するかどうかを検出し、要素が含まれる前に確認します。選択子表現を適用していないため、すべての祖先要素が返されるjQueryオブジェクトの一部となります。選択子を適用すると、一致する項目のみを含みます。

jQuery 遍历参考手册