.slice()

http://api.jquery.com/slice/

.slice( start [, end] ) 1.1.4追加
デモ

.slice( start [, end] ) 1.1.4追加

戻り値:jQuery

マッチした要素集合から、指定した部分を取り出します。

引数	説明
start	0始まりの選択開始位置の数値を指定します。マイナスの値を指定すると、終端からの指定になります。
[end]	0始まりの選択終了位置の数値を指定します。マイナスの値を指定すると、終端からの指定になります。省略された場合は、終端まで選択されたとみなされます。

次のようなリストがあった場合、

<ul>
   <li>リスト 項目 1</li>
   <li>リスト 項目 2</li>
   <li>リスト 項目 3</li>
   <li>リスト 項目 4</li>
   <li>リスト 項目 5</li>
</ul>

下記の処理を実行すると、リスト項目3,4,5が対象となり、背景色が赤くなります。

$('li').slice(2).css('background-color', 'red');

また、次のように終了位置の指定がされた場合は、リスト項目3,4が対象となります。 2つ目の引数の番号に該当する要素は含まれないことに注意してください。この特徴はjavaScriptのslice関数と同じです。

$('li').slice(2, 4).css('background-color', 'red');

マイナスの引数を下記のように実行した場合、リスト項目4が対象となります。

$('li').slice(-2, -1).css('background-color', 'red');

デモ

ランダムな値を受け取ってDIV要素のセットをsliceで取得し、背景色を黄色に変更します。

<!DOCTYPE html>
<html>
<head>
<style>
  div { width:40px; height:40px; margin:10px; float:left;
        border:2px solid blue; }
  span { color:red; font-weight:bold; }
  button { margin:5px; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p><button>sliceで切り替え</button>
<span>ボタンをクリックしてください</span></p>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<script>
  function colorEm() {
    var $div = $("div");
    var start = Math.floor(Math.random() *
                           $div.length);
    var end = Math.floor(Math.random() *
                         ($div.length - start)) +
                         start + 1;
    if (end == $div.length) end = undefined;
    $div.css("background", "");
    if (end)
      $div.slice(start, end).css("background", "yellow");
     else
      $div.slice(start).css("background", "yellow");
    $("span").text('$("div").slice(' + start +
                   (end ? ', ' + end : '') +
                   ').css("background", "yellow");');
  }
  $("button").click(colorEm);
</script>
</body>
</html>