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 の子孫でないからです。