jQuery リファレンス：parents

索引

Core：コアとなる仕組み

Selectors：セレクタ

Attributes：属性

Traversing：対象の変更

Manipulation：操作

CSS：スタイルシート

Events：イベント

Effects：演出効果

Ajax：xml等との連携

Utilities：ユーティリティ

Data：データ

Miscellaneous：諸々

Deferred：処理管理

Callbacks：コールバック

Internals：内部処理

.parents( )先祖要素を選択

jQueryオブジェクトで指定した要素の「先祖」要素でセレクタにマッチする要素をすべて選択します。引数のセレクタは省略可能で、省略した場合は先祖要素がすべて選択されます。

名前が似ているparentメソッドはparentsメソッドと異なり「親」要素だけを選択します。parentsメソッドは調査範囲が広い分、parentメソッドよりも負荷がかかります。親要素しか選択しない場合はparentメソッドを利用しましょう。

サンプル（parents/01.html）を開いて２つのdiv要素内に共にb要素があるのを確認して下さい。上のdiv要素内だけdiv要素とb要素の間にp要素があります。

<div><p>これは<b>jQuery</b>のサンプルです</p></div>
<div>これは<b>jQuery</b>のサンプルです</div>

jQueryは以下の様に記述され、buttonをクリックするとparentsメソッドによってb要素の先祖要素を選択します。選択した要素はcssメソッドを利用して赤枠を表示します。

$("button").click(function(){
	$("b").parents().css("border","3px solid red");
});

結果として、buttonをクリックするとb要素の先祖要素がすべて（body要素もhtml要素も）選択され赤枠が付きます。選択範囲がとても広いため単独では利用されず、次に紹介する引数を設定する構文や、他のメソッドと合わせて利用することになると思います。

引数にセレクタを指定すると、先祖要素のうち指定したセレクタとマッチした要素だけ選択するようになります。サンプル（parents/02.html）を開いてhtml構成はサンプルparents/01.htmlと同じ事を確認してください。

jQueryは以下の様に記述されparentsメソッドの引数としてdiv要素が設定されています。

$(function () {
	$("b").parents("div").css("border","3px solid red");
});

結果として、buttonをクリックするとb要素の先祖要素のうちdiv要素だけが選択されます。