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

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

.prevUntil( )前要素から任意の要素までを選択

構文

前要素から任意の要素までを選択返値:jQueryオブジェクト
jQo.prevUntil( [セレクタ] [,フィルタ] )ver1.4〜
jQo.prevUntil( [jQo/DOM] [,フィルタ] )ver1.6〜

機能

jQueryオブジェクトで指定した要素の兄弟要素(同じ階層の要素)で「前の要素からセレクタで指定した要素まで」を選択します。引数を省略すると前の要素すべてを選択します(prevAllメソッドと同じ機能)。また第2引数(フィルタ)を設定することでjQueryオブジェクトで指定した要素からセレクタまでにある任意の要素を選択することができます。

ver1.6からはセレクタの代わりにjQueryオブジェクトやDOM要素を設定することができます。

解説

引数を設定しない

サンプル(prevUntil/01.html)を開いてul要素が2つあり、それぞれli要素を5つ持っていることを確認して下さい。このうち上のul要素の1番目のli要素にはsample、4番目のli要素にはtestのclass属性が付けられています。

<ul>
	<li class="sample">list item 1</li>
	<li>list item 2</li>
	<li>list item 3</li>
	<li class="test">list item 4</li>
	<li>list item 5</li>
</ul>

jQueryは以下の様に記述され、buttonをクリックすると引数のないprevUntilメソッドによってtestのクラス属性が付いたli要素と同じ階層の要素で前にある要素すべてを選択します。選択した要素はcssメソッドを利用して背景を赤くしています。

$("button").click(function(){
	$("li.test").prevUntil().css("background-color","#f99");
})

結果として、buttonをクリックするとtestのクラス属性が付いたli要素以前すべての要素の背景色が赤くなります。下のul要素内にあるli要素は同階層ではないので選択されません。引数なしだとprevAllメソッドと同じ機能なので利用する機会は少ないと思います。

範囲を指定

第1引数に要素を設定することで、範囲を指定することができます。サンプル(prevUntil/02.html)を開いてhtmlの構成がサンプルprevUntil/01.htmlと同じ事を確認してください。jQueryは以下の様に記述され、prevUntilメソッドの引数にsampleのクラス属性が設定されています。

$("button").click(function(){
	$("li.test").prevUntil(".sample").css("background-color","#f99");
})

結果として、buttonをクリックするとtestのクラス属性の付いたli要素の要素から引数で指定したsampleのクラス属性が付いたli要素までが選択されます。sampleのクラス属性が付いたli要素自体は選択されないことに注意してください

フィルタを設定

第2引数(フィルタ)を設定することで、選択する要素を絞ることができます。サンプル(prevUntil/03.html)を開いてhtmlの構成がすこし変更され上のul要素の2番目のli要素にselectMeのクラス属性が設定されている事を確認してください。

<ul>
	<li class="sample">list item 1</li>
	<li class="selectMe">list item 2</li>
	<li>list item 3</li>
	<li class="test">list item 4</li>
	<li>list item 5</li>
</ul>

jQueryは以下の様に記述され、prevUntilメソッドの第2引数にselectMeのクラス属性が設定されています。

$("button").click(function(){
	$("li.test").prevUntil(".sample",".selectMe").css("background-color","#f99");
})

結果として、buttonをクリックするとtestのクラス属性の付いたli要素の要素から第1引数で指定したsampleのクラス属性が付いたli要素まで範囲で、第2引数(フィルタ)で設定したselectMeのクラス属性をもつ要素(2番目のli要素)が選択されます。

jQueryオブジェクトやDOM要素を引数に利用

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

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

var myObj = $(".sample");
$("button").click(function(){
	$("li.test").prevUntil(myObj).css("background-color","#f99");
})

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

あまり利用する機会は無いと思いますがDOM要素を引数に利用したサンプルも用意しました。htmlの構成や機能はprevUntil/01.htmlと同じです。→サンプル(prevUntil/05.html

var myObj = document.getElementsByClassName("sample")[0];
$("button").click(function(){
	$("li.test").prevUntil(myObj).css("background-color","#f99");
})

関連項目

兄弟要素のうち前の要素だけを選択したい場合はprevメソッドを利用してください。
前の要素すべてを選択したい場合はprevAllメソッドを利用します。