jQuery closest() メソッド

❮ jQuery Traversing メソッド

<span> の最初の祖先の <ul> 要素を返す:

$(document).ready(function(){
    $("span").closest("ul").css({"color": "red", "border": "2px solid red"});
});

結果:

body (great-great-grandparent)
div (great-grandparent)
    ul (second ancestor - second grandparent)
      ul (first ancestor - first grandparent)
    • li (direct parent)  span  
     
Try it Yourself »

定義と用法

closest() メソッドは、選択した要素の最初の祖先を返します。

祖先とは、親、祖父母、曽祖父母、などです。

DOM ツリー: このメソッドは、現在の要素から文書のルート要素(<html>)に達する 全ての通路を、DOM 要素の最初の祖先を検索するまで上方へトラバースします。

このメソッドは、どちらも DOM ツリーを上方にトラバースするという点で、 parents() と似ていますが、 相違点は次の通りです:

closest()

parents()

その他の関連するメソッド:


構文

選択した要素の最初の祖先返す:

$(selector).closest(filter)

DOM ツリー内を検索するために、DOM コンテキストを使用して最初の祖先を返します:

within:

$(selector).closest(filter,context)

パラメータ 説明
filter 必須。祖先の検索を絞り込むために、セレクタ式、要素または jQuery オブジェクトを指定する
context 任意。マッチした要素内部から検索する DOM 要素

Try it Yourself - 例

<span> 要素の最初の祖先である <span> 要素を返す
このメソッドは、現在の要素から開始するので、<span> の最初の <span> は <span> が返される。

内部で最初の祖先要素を検索するコンテキストとして DOM 要素を渡す
Using both parameters to pass in a DOM element as the context within which to search for the first <ul> element.


❮ jQuery Traversing メソッド