jQueryのparents()メソッド
例
<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
定義と使用法
親()メソッドは、選択した要素のすべての祖先要素を返します。
祖先は、親、祖父母、曽祖父母などです。
DOMツリー:このメソッドは、親要素からDOM要素の祖先に沿って、ドキュメントのルート要素(<html>)まで上向きにトラバースします。
注:フィルターパラメーターが空の場合、この関数は、直接の親から<body>および<html>まで、一連の要素のすべての祖先を選択します。したがって、セレクター式を渡して検索結果を絞り込むと便利なことがよくあります。
このメソッドは、どちらもDOMツリーをトラバースするという点でclosest()に似ています。違いは次のとおりです。
両親()
- 親要素で始まります
- DOMツリーを上に移動し、渡された式に一致するすべての祖先を返します
- 返されたjQueryオブジェクトには、0個または複数の要素が含まれています
close()
- 現在の要素で始まります
- DOMツリーを上に移動し、渡された式に一致する最初の祖先を返します
- 返されるjQueryオブジェクトには0個または1個の要素が含まれています
その他の関連する方法:
構文
$(selector).parents(filter)
Parameter | Description |
---|---|
filter | Optional. Specifies a selector expression to narrow down the search for ancestors Note: To return multiple ancestors, separate each expression with a comma. |
自分で試してみてください-例
を絞り込むフィルターパラメーターを使用して、<ul>要素である<span>のすべての祖先を返す方法。
を返すフィルターパラメーターを使用して、<li>および<div>要素である<span>のすべての祖先を返す方法。
する<span>要素の祖先が実際に誰であるかを示すデモンストレーション。