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

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

.slice( )指定した範囲のインデックス番号を持つ要素を選択

構文

指定した範囲のインデックス番号を持つ要素を選択返値:jQueryオブジェクト
jQo.slice( 開始番号 [,終了番号] )ver1.1.4〜

機能

jQueryオブジェクトで指定した要素のうち引数に指定した範囲のインデックス番号をもつ要素を選択します(開始番号の要素は選択されますが、終了番号の要素は選択されません)します。インデックス番号は0から始まることに注意してください。終了番号を省略した場合は最後まで選択されます。

また番号に負の値を利用することで最後の要素から指定することができます。負の値を指定する場合はインデックス番号は-1から始まります

解説

開始番号を設定

サンプル(slice/01.html)を開いてul要素が2つあり、それぞれli要素を5つ持っていることを確認して下さい。インデックス番号が確認しやすいように()内にインデックス番号を書いています。jQueryは以下の様に記述され、buttonをクリックするとli要素のうちインデックス番号が3以降の要素すべてを選択します。選択した要素はcssメソッドを利用して背景を赤くしています。

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

結果として、buttonをクリックするとインデックス番号が3以降のli要素の背景が赤くなります(引数で指定した3番目の要素も選択されます)。

終了番号も設定

サンプル(slice/02.html)を開いてhtmlの構成がサンプルslice/01.htmlと同じ事を確認してください。jQueryは以下の様に変更されsliceメソッドの第2引数に6が設定されています。これでインデックス番号が3から6未満のli要素が選択されます。終了番号で指定した6番目の要素は選択されないことに注意してください

$("button").click(function(){
	$("li").slice(3,6).css("background-color","#f99");
})

結果として、buttonをクリックするとインデックス番号が3から5までのli要素の背景が赤くなります(第2引数で設定した6番目の要素は選択されません)。

負の値を利用する

サンプル(slice/03.html)を開いてhtmlの構成がサンプルslice/01.htmlとほとんど同じ事を確認してください。異なっているのはli要素の内容に記述したインデックス番号がマイナス基準になっているだけです。
jQueryは以下の様に変更されsliceメソッドの引数に-7と-1が設定されています。結果として、buttonをクリックするとインデックス番号が-7から-1までのli要素の背景が赤くなります。

$("button").click(function(){
	$("li").slice(-7, -1).css("background-color","#f99");
})

負の値を利用する時に勘違いしがちなのが、最後から数えるので開始番号を最後の要素にしてしまうことです。サンプル(slice/03b.html)を開いてhtmlの構成がサンプルslice/03.htmlと同じ事を確認してください。jQueryは以下の様に記述され、引数の設定順がサンプルslice/03.htmlと逆になっています。

$("button").click(function(){
	$("li").slice(-1, -7).css("background-color","#f99");
})

最後の要素から数えるので、これで良さそうですがbuttonをクリックしても選択されません。負の値を利用する時も開始番号には最初の要素を指定します。

関連項目

特定のインデックス番号を持つ要素だけを選択したい場合はeqメソッドを利用します。
最初の要素を選択したい場合はfirstメソッドを利用します。
最後の要素を選択したい場合はlastメソッドを利用します。

メモ

個人的には負の値を利用する時は開始番号に最後の要素を指定した方が扱いやすいような気がします。そうすれば第2引数を省略すると、指定した番号からさかのぼって最初の要素まで選択する構文もありえるので。

Traversingのメソッドの多くはセレクタにも似たものがあるけれど、sliceメソッドにはありません。セレクタ:gt()セレクタ:lt()複数のセレクタ(and)で利用してみましたが、上手く機能しませんでした。
→サンプル(slice/test01.html

$("button").click(function(){
	$("li:gt(3)li:lt(6)").css("background-color","#f99");
})