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回分(第72回~第76回)のみ表示しています。
 連載の全タイトルを参照するには、[この記事の連載 INDEX]を参照してください。

72. 現在の要素から指定された祖先/兄弟要素までを取得するには?(prevUntil/nextUntil/parentsUntil)

prevUntil/nextUntil/parentsUntilメソッドを使って、jQueryオブジェクトで保持している現在の要素セットから、現在の要素の直後から、ツリー構造において(指定された)兄/弟/親の関係にある要素の直前までの範囲にある全要素を取得する方法を説明する。

73. 要素セットの内容を順に処理するには?(map)

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

74. 要素セットから指定の条件に合致したものを取り除くには?(not)

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

75. 【現在、表示中】≫ 現在の要素セットからm~n番目の要素を取得するには?(slice)

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

76. 要素セットからn番目の要素を取得するには?(eq)

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

サイトからのお知らせ

Twitterでつぶやこう!


Build Insider賛同企業・団体

Build Insiderは、以下の企業・団体の支援を受けて活動しています(募集概要)。

ゴールドレベル

  • 日本マイクロソフト株式会社
  • グレープシティ株式会社