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

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

.next( )次の要素を選択

構文

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

機能

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

解説

引数を設定しない

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

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

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

引数を設定

引数を設定すると、選択する要素を絞ることができます。サンプル(next/02.html)を開いてbody内の構成を確認してください。 以下の様に2番目のli要素にtestのクラス属性、4,5番目にsampleのクラス属性が設定されています。

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

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

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

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

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

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

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

関連項目

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

メモ

直後でなくても要素を選択したい

nextメソッドは直後の要素しか調査しないため、next/02.htmlのように引数で指定した要素が離れていると選択されません。直後でなくても「一番近い要素」を選択したい場合はnextAllメソッドを利用します。サンプル(next/test01.html)を開いてbody内の構成がnext/02.htmlと同じ事を確認してください。jQueryは以下の様にnextメソッドの代わりにnextAllメソッドが利用されています。

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

結果として、buttonをクリックするとtestのクラス属性のli要素の後にあるsampleのクラス属性の要素が全て(4,5番目)選択されます。

ここから一番近いsampleのクラス属性の要素を選択するにはセレクタの:firstかトラバースのfirstメソッドを利用します。参考としてサンプルを用意したので確認して下さい。
→セレクタの:firstを利用した例:サンプル(next/test01b.html
→トラバースの.first()を利用した例:サンプル(next/test01c.html

両方のサンプルともtestのクラス属性の要素にある一番近いsampleのクラス属性の要素(4番目のli要素)だけが選択されます。

Traversingのメリット

セレクタ:+(直近の後要素)を利用すればnextメソッドと同じようなことが可能です。サンプル(next/test02.html)を開いてhtmlの構成がサンプルnext/01.htmlと同じ事を確認してください。セレクタの部分をセレクタ:+(直近の後要素)に置き換えただけです(後要素に*「すべての要素」を利用することで引数を利用しないnextメソッドと同じ効果になります)。

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

buttonをクリックするとサンプルnext/01.htmlと同じ結果になることを確認して下さい。

Traversingの項目にあるメソッドの多くはセレクタでも似たようなことが可能です。しかしTraversingのメリットとしては、ユーザーが捜査した対象から辿った要素を操作できる点です。これは以下の使い方で説明しているので確認してください。 →参考:使い方「thisから辿る」