デザイナーにも分かりやすいjQuery入門講座|jQueryの使い方

このエントリーをはてなブックマークに追加
索引
Core:コアとなる仕組み
Selectors:セレクタ
Attributes:属性
Traversing:対象の変更
Manipulation:操作
CSS:スタイルシート
Events:イベント
Effects:演出効果
Ajax:xml等との連携
Utilities:ユーティリティ
Data:データ
Miscellaneous:諸々
Deferred:処理管理
Callbacks:コールバック
Internals:内部処理

.parents( )先祖要素を選択

構文

先祖要素を選択する返値:jQueryオブジェクト
jQo.parents( [セレクタ] )ver1.0〜

機能

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

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

解説

引数を利用しない

サンプル(parents/01.html)を開いて2つの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要素だけが選択されます。

関連項目

調査範囲を指定できるparentsUntilメソッドのほうが処理が高速なので、document全体に関わるようなケース以外はparentsUntilを利用したほうが良いと思います。
親要素(直近の先祖要素)のみを選択したい場合はparentメソッドを利用しましょう。
先祖要素のうち、直近の要素だけを選択したい場合はclosestメソッドを利用します。

closestメソッドとの違いが分かるようにサンプルを作成しました。サンプル(parents/test01.html)を開いてb要素の先祖要素にdiv要素が「2つ」あることを確認して下さい。

<div class="large">
	<div class="small">
		これは<b>jQuery</b>のサンプルです
	</div>
</div>

buttonをクリックすると、parentsメソッドでは2つのdiv要素すべてを選択しますがclosestメソッドでは直近のdiv要素しか選択しません。→サンプル(closest/02.html