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

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

.parentsUntil( )任意の要素までの先祖要素すべてを選択

構文

任意の要素までの先祖要素すべてを選択返値:jQueryオブジェクト
jQo.parentsUntil( [セレクタ] [,フィルタ])ver1.4〜
jQo.parentsUntil( [DOM/jQo] [,フィルタ])ver1.6〜

機能

jQueryオブジェクトで指定した要素から先祖方向に調査し、引数とマッチする要素までのすべてを選択します。引数のセレクタは省略可能で、省略した場合は指定したjQueryオブジェクトで指定した要素の先祖要素がすべて選択されます。さらに第2引数のフィルタにセレクタを指定することで、調査範囲からそのセレクタにマッチした要素だけを選択できます。

ver1.6からは引数にDOM要素やjQueryオブジェクトを利用できるようになりました。

解説

引数を利用しない

引数を利用しないとparentsメソッドで引数を設定しなかったのと同じ機能になります。つまりjQueryオブジェクトで指定した要素の先祖要素全てを選択します。サンプル(parentsUntil/01.html)を開いてdiv要素が4つ入れ子になっているのを確認して下さい(最後の階層にはp要素が設定されています)。

<div class="level-1">
	<div class="level-2">
		<div class="level-3">
			<div class="level-4">
				<p>div要素内のp要素です</p>
			</div>
		</div>
	</div>
</div>

jQueryは以下の様に記述され、buttonをクリックすると引数のないparentsUntilメソッドによって、jQueryオブジェクトで指定したp要素の先祖要素すべて(html要素,body要素を含む)を選択します。選択した要素はcssメソッドを利用して枠を赤く変更しています。

$("button").click(function(){
	$("p").parentsUntil().css("border","1px solid red");
})

引数を利用する

引数を利用すると、jQueryオブジェクトで指定した要素から先祖方向に調査し、引数のセレクタで指定した要素が見つかるまでの要素すべてを選択します。このとき引数のセレクタで指定した要素は含まれません。

サンプル(parentsUntil/02.html)を開いてbody内の構成はサンプルparentsUntil/01.htmlと同じ事を確認してください。jQueryは以下の様に記述されparentsUntilメソッドの引数としてlevel-1のクラス属性が設定されています(このクラスは一番外側のdiv要素に設定されています)。

$("button").click(function(){
	$("p").parentsUntil(".level-1").css("border","1px solid red");
})

結果として、buttonをクリックするとp要素から一番外側のdiv要素(level-1のクラス属性があるdiv)までのdiv要素が選択され枠が赤く変更されます。
引数で指定したlevel-1のdiv要素は選択されないことに注意してください

フィルタを利用する

フィルタを設定すると、jQueryオブジェクトで指定した要素から、引数で指定したセレクタまでの要素からフィルタで指定した要素のみを選択します。サンプル(parentsUntil/03.html)を開いてbody内の構成はサンプルparentsUntil/01.htmlと同じ事を確認してください。jQueryは以下の様に記述されparentsUntilメソッドの第2引数(フィルタ)としてlevel-3のクラス属性が設定されています(つまりフィルタを設定した以外はparentsUntil/02.htmlと同じです)。

$("button").click(function(){
	$("p").parentsUntil(".level-1",".level-3").css("border","1px solid red");
})

結果として、buttonをクリックするとフィルタで指定したlevel-3のdiv要素だけが選択されます。

jQueryオブジェクトを利用する

ver1.6から引数にjQueryオブジェクトを利用できるようになりました。サンプル(parentsUntil/04.html)を開いてbody内の構成はサンプルparentsUntil/01.htmlと同じ事を確認してください。

jQueryは以下の様に記述されparentsUntilメソッドの引数にjQueryオブジェクト(変数myObj)設定されています。myObjは1行目で作成しておりlevel-1のクラス属性にマッチしたjQueryオブジェクトになっています。つまり機能的にはparentsUntil/02.htmlと全く同じです。

var myObj = $(".level-1")
$("button").click(function(){
	$("p").parentsUntil(myObj).css("border","1px solid red");
})

このサンプルではシンプルすぎてメリットはないのですが、メリットとしては高速化につながります。jQueryではセレクタにマッチするjQueryオブジェクトを作成する際に負荷が掛かるので、すでに作成されたjQueryオブジェクトがあればそれを使い回したほうが負荷が減るのです。
→参考:使い方「jQueryの高速化:jQueryはオブジェクトに記憶しておく」

関連項目

parentsメソッドと異なり調査範囲を限定できるので処理が高速だと思います。