jQuery parents() メソッド

❮ jQuery Traversing メソッド

<span> の全ての祖先要素を返す:

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

結果:

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

定義と用法

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

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

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

注:filter パラメータが空の場合、この関数は、直接の親から <body> および <html> に至る 全ての要素集合の全祖先を選択します。 従って、多くの場合、セレクタ式を渡すことは検索結果を絞り込むために役立ちます。

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

parents()

closest()

Other 関連するメソッド:


構文

$(selector).parents(filter)

パラメータ 説明
filter 任意。祖先の検索を絞り込むためにセレクタ式を指定する

注: 複数の祖先を返すには、各式はカンマで区切ること

Try it Yourself - 例

検索の絞り込み
<ul> 要素である <span> の全祖先を返すために、filter パラメータを使用する方法。

複数の祖先を返す
<li> および <div> 要素である <span> の全祖先を返すために、filter パラメータを使用する方法。

タグ名で要素の祖先を表示する
<span> 要素の祖先は、実際に何であるかを示すデモ。


❮ jQuery Traversing メソッド