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

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

.prevAll( )前の要素すべてを選択

構文

前の要素すべてを選択返値:jQueryオブジェクト
jQo.prevAll( [セレクタ] )ver1.2〜

機能

jQueryオブジェクトで指定した要素の兄弟要素(同じ階層の要素)で「前の要素すべて」を選択します。引数を設定することで選択する要素を絞ることができます。

解説

引数を設定しない

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

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

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

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

結果として、buttonをクリックするとtestのクラス属性が付いたli要素以前すべての要素の背景色が赤くなります。下のul要素内にあるli要素は同階層ではないので選択されません。

引数を設定

引数を設定すると、選択する要素を絞ることができます。サンプル(prevAll/02.html)を開いてhtmlの構成がサンプルprevAll/01.htmlとほとんど同じ事を確認してください。異なるのは2つのul要素の最初のli要素に共にsampleのクラス属性が設定されている点だけです。

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

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

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

結果として、buttonをクリックするとtestのクラス属性が付いたli要素以前の要素のうち、sampleのクラス属性の付いたli要素(1番目のli要素)だけが選択されます。

関連項目

兄弟要素のうち前の要素だけを選択したい場合はprevメソッドを利用してください。prevメソッドは前の要素しか調査しないので高速に処理されます。
特定の対象までの前の要素を選択したい場合はprevUntilメソッドを利用します。
前ではなく次の要素すべてを選択したい場合はnextAllメソッドを利用します。

メモ

一番近い要素だけ選択したい

prevAllメソッドは引数で指定した要素が複数ある場合は、すべてを選択していまいます。サンプル(prevAll/test01.html)を開いてbody内の構成を確認して下さい。以下の様にtestのクラス属性の要素の前にsampleのクラス属性の要素が2つあります。

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

jQueryは以下の様にprevAllメソッドを利用しているので、buttonをクリックすると1,2番目の2つのli要素が選択されます。

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

もし一番近いsampleのクラス属性を持つ要素だけを選択したい場合は引数にセレクタの:firstを利用します。サンプル(prevAll/test01b.htmlを開いてjQueryを確認して下さい。prevAllメソッドのセレクタに:firstを追加しています。

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

結果として、buttonをクリックすると一番近いsampleのクラス属性を持つ要素(2番目のli要素)だけが選択されます。またトラバースのfirstメソッドも利用できます。

サンプル(prevAll/test01c.htmlを開いてjQueryを確認して下さい。prevAllメソッドの後にfirstメソッドが追加されています。結果はprevAll/test01b.htmlと同じように4番目のli要素だけが選択されます。

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

私は最初:firstや.first()ではなく:lastlastメソッドを使うのでは?と思ったのですが、実際は説明のとおりfisrtを利用します。これはprevAllメソッドが前に向かって順番に調査しているためだと考えられます。

同じ機能のセレクタはありません

nextメソッドnextAllメソッドと同じような効果を持つセレクタ(セレクタ:+(直近の後要素)セレクタ:~(後要素))はあるけれど、prevメソッドやprevAllメソッドと同じような効果を持つセレクタはありません。