Deep Insider の Tutor コーナー
>>  Deep Insider は本サイトからスピンオフした姉妹サイトです。よろしく! 
jQuery逆引きリファレンス

jQuery逆引きリファレンス

現在の要素セットからm~n番目の要素を取得するには?(slice)

2017年7月27日

jQueryオブジェクトで保持している要素セットから、指定したm~n番目の要素のみを取得できるsliceメソッドの基本的な使い方を説明する。

  • このエントリーをはてなブックマークに追加

 sliceメソッドを利用することで、現在の要素セットからmn番目の要素だけを取り出せます。インデックス番号は、一般的な配列と同じくゼロスタートです。また、実際に取り出されるのは、終了インデックスに指定するnではなくn-1をインデックスとする要素までとなる点には注意してください。

 具体的な例も見てみましょう。以下は、24番目<div>要素の背景色を水色に塗りつぶす例です。以下ではsliceメソッドに渡す引数に「1, 4」を指定しているので、インデックス13までの要素(24番目<div>要素)が取り出されています。

HTML
<!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.html)
2~4番目の<div>要素だけを水色で塗りつぶした
2~4番目の<div>要素だけを水色で塗りつぶした

 sliceメソッドの構文は、以下の通りです。

[構文]sliceメソッド

slice(start [,end])

  • start: 開始インデックス
  • end: 終了インデックス

 引数end(終了インデックス)を省略した場合は、引数startから要素セットの末端までを取り出します。

 以下は、上のコードを書き換えたものと、その結果です。この場合、2番目以降の要素全てに対して、背景色が付与されます。

JavaScript
$('div').
  css('border', 'solid 1px Red').
  slice(1).
  css('background-color', 'Yellow');
sliceメソッドで引数endを省略した例
2番目以降の<div>要素を水色で塗りつぶした
2番目以降の<div>要素を水色で塗りつぶした

 引数startendには負数を指定することもできます。その場合、末尾の要素のインデックスを-1、その前の要素のインデックスを-2、……として数えます。以下は、最初のリストを、負数を使って書き換えた例と、その結果です。

JavaScript
$('div').
  css('border', 'solid 1px Red').
  slice(-4, -1).
  css('background-color', 'Yellow');
sliceメソッドで引数start/endに負数を指定した例
2~4番目の<div>要素を水色で塗りつぶした
2~4番目の<div>要素を水色で塗りつぶした

 この場合、引数endの値は、末尾から何個分の要素を除去するか、と考えると分かりやすいかもしれません(この例であれば、末尾から4個を取り出した後、末尾から1個分を除去する、という意味になります)。

処理対象:指定範囲で選択 カテゴリ:トラバーシング(選択系の操作)
API:.slice() カテゴリ:Traversing(トラバーシング) > Filtering(フィルタリング)

※以下では、本稿の前後を合わせて5回分(第73回~第77回)のみ表示しています。
 連載の全タイトルを参照するには、[この記事の連載 INDEX]を参照してください。

jQuery逆引きリファレンス
73. 要素セットの内容を順に処理するには?(map)

jQueryオブジェクトで保持している要素セットを、1つずつ順番に処理し、その処理結果をjQueryオブジェクトとして取得できるmapメソッドの基本的な使い方を説明する。

jQuery逆引きリファレンス
74. 要素セットから指定の条件に合致したものを取り除くには?(not)

jQueryオブジェクトで保持している要素セットから、指定条件に合致しない要素のみを取得できるnotメソッドの基本的な使い方を説明する。

jQuery逆引きリファレンス
75. 【現在、表示中】≫ 現在の要素セットからm~n番目の要素を取得するには?(slice)

jQueryオブジェクトで保持している要素セットから、指定したm~n番目の要素のみを取得できるsliceメソッドの基本的な使い方を説明する。

jQuery逆引きリファレンス
76. 要素セットからn番目の要素を取得するには?(eq)

jQueryオブジェクトで保持している要素セットから、指定したインデックス番号の要素のみを取得できるeqメソッドの基本的な使い方を説明する。

jQuery逆引きリファレンス
77. 要素セットから特定の子要素を持つ要素だけを取得するには?(has)

jQueryオブジェクトで保持している要素セットから、特定の子要素を持つ要素のみを取得できるhasメソッドの基本的な使い方を説明する。

サイトからのお知らせ

Twitterでつぶやこう!