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

.nextUntil( )次要素から任意の要素までを選択

構文

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

機能

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

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

解説

引数を設定しない

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

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

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

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

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

範囲を指定

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

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

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

フィルタを設定

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

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

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

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

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

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

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

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

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

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

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

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

関連項目

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