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

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

.nextAll( )次の要素すべてを選択

構文

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

機能

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

解説

引数を設定しない

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

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

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

引数を設定

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

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

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

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

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

関連項目

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

メモ

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

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

<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は以下の様にnextAllメソッドを利用しているので、buttonをクリックすると4,5番目の2つのli要素が選択されます。

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

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

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

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

サンプル(nextAll/test01c.htmlを開いてjQueryを確認して下さい。nextAllメソッドの後にfirstメソッドが追加されています。

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

結果はnextAll/test01b.htmlと同じように4番目のli要素だけが選択されます。

Traversingのメリット

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

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

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

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

サンプル(nextAll/test02b.html)を開いてjQueryを確認して下さい。上記使い方で紹介しているサンプルに似ていますが、クリックするdiv要素の後に2つの要素があります。nextAllメソッドを利用すれば2つともまとめて操作する事ができます。

注意点としては、他のメニューに影響しないように以下の様にdiv要素で囲む点です。nextAllメソッドは兄弟要素(同じ階層の要素)を対象にしているので、この様にdiv要素で階層を分けるのです。

<div>
	<div class="clickArea">click me.</div>
	<div class="textArea">いろは...せすん</div>
	<div class="textArea">いろは...すん</div>
</div>
<div>
	<div class="clickArea">click me.</div>
	<div class="textArea">いろは...せすん</div>
	<div class="textArea">いろは...せすん</div>
</div>