jQueryで要素、文字列、配列を切り取る場合はslice()を使うと便利です。リストの2番目～4番目の要素だけを取得したり、文字列の最初から4文字目までを取得したり、配列の3番目を取り出したり等、いろいろな方法で取得できます。
目次
要素を取得
slice()の引数に任意のインデックス（順番）を指定すると、セレクタで指定した要素のうち、指定した順番の要素だけを取得します。
インデックスは要素の順番のことで0から数えます。例えば2番目の要素はインデックスが1になるため、slice()の引数には1を指定します。
開始位置以降の要素を取得
まずは開始位置だけを指定し取得する方法です。終了位置は指定していないので、セレクタで指定した要素の最後までを取得します。
以下のサンプルでは、2個目以降のテキストを赤文字にします。
jQuery
|
1 2 |
// 開始位置以降の要素を取得 $('li').slice(1).css('color', 'red'); |
結果
以下のように2個目以降のテキストが赤くなったかと思います。
- リスト01
- リスト02
- リスト03
- リスト04
開始～終了位置未満の要素を取得
slice()は開始位置だけでなく終了位置も指定できます。終了位置未満のため、指定した終了位置の1つ前の要素までを取得します。
以下のサンプルでは、1個目と2個目のテキストを赤文字にします。
jQuery
|
1 2 |
// 開始～終了位置未満の要素を取得 $('li').slice(0, 2).css('color', 'red'); |
結果
以下のように1個目と2個目のみテキストが赤くなったかと思います。
- リスト01
- リスト02
- リスト03
- リスト04
開始位置以降の要素を逆から数える
slice()の引数にマイナスのインデックスを指定すると、逆から数えて取得できます。一番最後の要素を取得するとき等に使えますね。
ちなみにマイナスの場合、インデックスは-1から数えます。
jQuery
|
1 2 |
// 開始位置以降の要素を逆から数える $('li').slice(-2).css('color', 'red'); |
結果
以下のように逆から数えた要素以降のテキストが赤くなったかと思います。
マイナスのインデックスでも、指定したインデックスから最初の方に遡るのではなく、最後までを取得します。
- リスト01
- リスト02
- リスト03
- リスト04
開始~終了位置未満の要素を逆から数える
マイナスのインデックスを指定する場合でも終了位置を指定できます。
順番は開始位置から指定しますので、大きいマイナスのインデックスから指定します。小さいマイナスのインデックスから指定すると何も取得できません。
jQuery
|
1 2 |
// 開始～終了位置未満の要素を逆から数える $('li').slice(-3, -1).css('color', 'red'); |
結果
以下のように逆から数えた要素範囲のテキストが赤くなったかと思います。
- リスト01
- リスト02
- リスト03
- リスト04
文字列を取得
slice()は文字列の特定の部分も切り取ることができます。
文字列の特定範囲を取得
文字列の好きな部分だけを切り取ります。開始位置と終了位置を指定すると、テキストの特定の部分だけを取得できます。
以下のサンプルでは、下記テキストの4文字目～9文字目を切り取り<p>要素に貼り付けます。
テキスト
|
1 |
レッドホットチキン/フード |
jQuery
|
1 2 3 4 5 |
// 文字列の特定範囲を取得 var str = $('p#js-sample01').text().slice(3, 9); // 特定要素に貼り付け $('p#js-sample02').text(str); |
結果
以下のようにテキストが切り取れたかと思います。
文字列の特定範囲を逆から取得
文字列もマイナスで逆から取得することもできます。
以下のサンプルでは、下記テキストの先頭～逆から4文字目の1文字前までを切り取り<p>要素に貼り付けます。
テキスト
|
1 |
レッドホットチキン/フード |
jQuery
|
1 2 3 4 5 |
// 文字列の特定範囲を取得 var str = $('p#js-sample01').text().slice(0, -4); // 特定要素に貼り付け $('p#js-sample02').text(str); |
結果
以下のようにテキストが切り取れたかと思います。
配列を取得
slice()は配列も取得することができます。
配列の何番目かを指定すれば特定の値のみ取得し、新しい配列として再作成できます。
配列の特定範囲を取得
配列の特定範囲の値を取得します。開始位置と終了位置を指定すると、配列の特定の値だけを取得し、新しい配列として再作成できます。
以下のサンプルでは、配列の2番目と3番目の値を取得し、コンソールログに表示させます。
コンソールログについては下記の記事をご覧ください。
jQuery
|
1 2 3 4 5 6 7 8 |
// 配列を作成 var arr = ['りんご', 'みかん', 'いちご', 'バナナ']; // 配列から特定の値を取得 var fruit = arr.slice(1, 3); // コンソールログに表示 console.log(fruit); |
結果
コンソールログをご覧ください。
以下のように配列の特定の値が配置された新しい配列が表示されたかと思います。
[“みかん”, “いちご”]
※ブラウザによっては上記のようには表示されず、Array(2)と表示される場合があります。その際は、そのテキストの左にある▶マークをクリックすると上記配列が表示されます。
