jQuery 遍历 - closest() メソッド

この例では、closest()を使用してイベントデリゲートを完了する方法を示します。最も近いリスト要素またはその子孫要素がクリックされた場合、黄色い背景が切り替わります:

$( document ).bind("click", function( e ) {
    $( e.target ).closest("li").toggleClass("hilight");
  });

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

定義と使用法

closest()メソッドは、DOM木を上方向に沿って、現在の要素から選択器に一致する最初の祖先要素を取得します。

文法

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

詳細な説明

DOM要素集合を表すjQueryオブジェクトが与えられた場合、.closest()メソッドはDOM木内のこれらの要素およびその祖先要素を検索し、一致する要素を構造する新しいjQueryオブジェクトを構築することができます。.parents() .closest()メソッドと同様に、両方ともDOM木を上方向に遍历します。微妙な違いはありますが、重要です:

.closest() .parents()
現在の要素から始めます 親要素から始めます
DOM木を上方向に遍历し、選択器に一致する要素を見つけるまで行きます。 DOM木を上方向に遍历し、ドキュメントのルート要素まで行き、各祖先要素を一時的な集合に追加します;選択器が適用されている場合、その集合に対して選択器に基づいてフィルタリングが行われます。
要素0個または1個を含むjQueryオブジェクトを返します 要素0個、1個、または複数を含むjQueryオブジェクトを返します

以下のHTMLスライスを見てください:

<ul id="one" class="level-1">
  <li class="item-i">I</li>
  <li id="ii" 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>

例 1

以下に、アイテム Aから始めて <ul> 要素を検索する例を示します:

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

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

これにより、level-2 <ul> の色が変更されます。なぜなら、DOM木を上方向に遡る際に最初にこの要素に達するからです。

例 2

以下に、検索するのは <li> 要素であると仮定します:

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

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

これにより、リストアイテム A の色が変更されます。.closest()メソッドがDOM木を上方向に遡る前に、li要素から始めて選択子がアイテムAに一致するまで検索します。

例 3

DOM要素をcontextとして渡し、その中で最も近い要素を検索することができます。

var listItemII = document.getElementById('ii');
$('li.item-a').closest('ul', listItemII).css('background-color', 'red');
$('li.item-a').closest('#one', listItemII).css('background-color', 'green');

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

上記のコードは、level-2 <ul> の色を変更します。なぜなら、それはリストアイテム A の最初の <ul> 祖先であり、同時にリストアイテム II の子孫だからです。それは level-1 <ul> の色を変更しません。なぜなら、それはリストアイテム II の子孫でないからです。