<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 | 任意。祖先の検索を絞り込むためにセレクタ式を指定する 注: 複数の祖先を返すには、各式はカンマで区切ること |
検索の絞り込み
<ul> 要素である <span> の全祖先を返すために、filter パラメータを使用する方法。
複数の祖先を返す
<li> および <div> 要素である <span> の全祖先を返すために、filter パラメータを使用する方法。
タグ名で要素の祖先を表示する
<span> 要素の祖先は、実際に何であるかを示すデモ。