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

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

.prev( )前の要素を選択

構文

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

機能

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

解説

引数を設定しない

サンプル(prev/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をクリックするとprevメソッドによってtestのクラス属性が付いたli要素と同じ階層で、前にある要素のみ選択します。選択した要素はcssメソッドを利用して背景を赤くしています。

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

結果として、buttonをクリックするとtestのクラス属性が付いたli要素の前(2番目)のli要素だけ背景色が赤くなります。

引数を設定

引数を設定すると、選択する要素を絞ることができます。サンプル(prev/02.html)を開いてhtmlの構成がサンプルprev/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は以下の様に記述され、prevメソッドの引数にsampleのクラス属性が設定されています。

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

結果として、buttonをクリックしても何も選択されません。testのクラス属性の付いたli要素の前の要素には引数で指定したようなsampleのクラス属性が付いていないためです。sampleのクラス属性は「前の前」ですがprevメソッドは直前の要素しか調査しません、この事に注意してください

では次に、(prev/02b.html)を開いてbody内の構成を確認してください。以下の様にsampleのクラス属性の要素がtestのクラス属性のすぐ前に移動されています。jQueryはprev/02.htmlから変更ありません。

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

このサンプルではすぐ前にsampleの要素があるため、buttonをクリックすると2番目のli要素が選択されます。

関連項目

兄弟要素のうち前にある要素をすべて選択したい場合はprevAllメソッドを利用してください。
前ではなく次の要素を選択したい場合はnextメソッドを利用します。

メモ

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

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