jQueryのparents()メソッド

❮jQueryトラバースメソッド

<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個の要素が含まれています

その他の関連する方法:

  • parent() -選択した要素の直接の親要素を返します
  • 親Until() -2つの指定された引数の間のすべての祖先要素を返します


構文

$(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>要素の祖先が実際に誰であるかを示すデモンストレーション。


❮jQueryトラバースメソッド