jQuery逆引きリファレンス
現在の要素セットからm～n番目の要素を取得するには？（slice）
jQueryオブジェクトで保持している要素セットから、指定したm～n番目の要素のみを取得できるsliceメソッドの基本的な使い方を説明する。
sliceメソッドを利用することで、現在の要素セットからm～n番目の要素だけを取り出せます。インデックス番号は、一般的な配列と同じくゼロスタートです。また、実際に取り出されるのは、終了インデックスに指定するnではなくn-1をインデックスとする要素までとなる点には注意してください。
具体的な例も見てみましょう。以下は、2～4番目の<div>要素の背景色を水色に塗りつぶす例です。以下ではsliceメソッドに渡す引数に「1, 4」を指定しているので、インデックス1～3までの要素（2～4番目の<div>要素）が取り出されています。
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery TIPS</title>
<style>
.box {
height:30px;
width:30px;
float:left;
margin-left:20px;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script>
$(function() {
$('div').
css('border', 'solid 1px #f00'). // 枠線を設定
slice(1, 4). // 2～4番目の要素に絞り込み
css('background-color', '#0ff'); // 背景色を設定
});
</script>
</body>
</html>
|
sliceメソッドの構文は、以下の通りです。
［構文］sliceメソッド
slice(start [,end])
- start： 開始インデックス
- end： 終了インデックス
引数end（終了インデックス）を省略した場合は、引数startから要素セットの末端までを取り出します。
以下は、上のコードを書き換えたものと、その結果です。この場合、2番目以降の要素全てに対して、背景色が付与されます。
|
$('div').
css('border', 'solid 1px Red').
slice(1).
css('background-color', 'Yellow');
|
引数start／endには負数を指定することもできます。その場合、末尾の要素のインデックスを-1、その前の要素のインデックスを-2、……として数えます。以下は、最初のリストを、負数を使って書き換えた例と、その結果です。
|
$('div').
css('border', 'solid 1px Red').
slice(-4, -1).
css('background-color', 'Yellow');
|
この場合、引数endの値は、末尾から何個分の要素を除去するか、と考えると分かりやすいかもしれません（この例であれば、末尾から4個を取り出した後、末尾から1個分を除去する、という意味になります）。
API：.slice() カテゴリ：Traversing（トラバーシング） > Filtering（フィルタリング）
※以下では、本稿の前後を合わせて5回分（第73回～第77回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
73. 要素セットの内容を順に処理するには？（map）
jQueryオブジェクトで保持している要素セットを、1つずつ順番に処理し、その処理結果をjQueryオブジェクトとして取得できるmapメソッドの基本的な使い方を説明する。
74. 要素セットから指定の条件に合致したものを取り除くには？（not）
jQueryオブジェクトで保持している要素セットから、指定条件に合致しない要素のみを取得できるnotメソッドの基本的な使い方を説明する。
75. 【現在、表示中】≫ 現在の要素セットからm～n番目の要素を取得するには？（slice）
jQueryオブジェクトで保持している要素セットから、指定したm～n番目の要素のみを取得できるsliceメソッドの基本的な使い方を説明する。
76. 要素セットからn番目の要素を取得するには？（eq）
jQueryオブジェクトで保持している要素セットから、指定したインデックス番号の要素のみを取得できるeqメソッドの基本的な使い方を説明する。
77. 要素セットから特定の子要素を持つ要素だけを取得するには？（has）
jQueryオブジェクトで保持している要素セットから、特定の子要素を持つ要素のみを取得できるhasメソッドの基本的な使い方を説明する。
