88 回閲覧されました

みなさんこんにちは、jonioです。

今回はjQueryのsliceメソッドの使い方のメモの記事になります。

sliceメソッドとは

複数並んでいるタグがあってcssを適用するタグを選択したりテキストや配列の一部を切り取る時に使えます。

基本の形は下記になります。

変数.slice(開始位置, 終了位置);

開始位置は0からスタートします。

使い方を例を通して見ていきます。

cssを適用する場合

下記のタグがあったとします。

<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
<li>リスト4</li>

下記の記述をしたとします。

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

終了位置を指定しない場合は開始位置から全ての要素が適用されます。

だからリスト2からリスト4までの文字の色が赤になります。

下記の記述をしたとします。

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

この場合はリスト2とリスト3の文字の色が赤になります。

開始位置と終了位置は-をつけることもできます。

下記の記述をしたとします。

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

位置に-が付くと最後の要素（今回だと<li>リスト4</li>）を-1とみなします。

そして<li>リスト3</li>を-2とみなして<li>リスト2</li>を-3とみなして<li>リスト1</li>を-4とみなします。

取得するのは位置にマイナスがつかない時と同じです。

だから<li>リスト3</li>と<li>リスト4</li>の文字の色が赤色になります。

下記の記述をしたとします。

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

ややこしいのですが終了位置が-で指定されている場合は終了位置のタグを含みません。

だから<li>リスト2</li>と<li>リスト3</li>の文字の色が赤色になります。

次はテキストで見ていきます。

テキストを切り取る場合

下記のテキストで考えます。

let text = vueは友達の管理人のjonio;

考え方はcssを適用する場合と同じです。

下記のコードで考えます。

text.slice(1);

結果は「ueは友達の管理人のjonio」です。

下記の記述をしたとします。

text.slice(1, 4);

結果は「ueは友」です。

位置に-がついている時も同じです。

開始位置だけを記述をしたとします。

text.slice(-2);

結果は「io」です。

終了位置も記述したとします。

text.slice(-3, -1);

結果は「ni」です。

配列の要素を切り取る場合

下記の配列で考えます。

let array = ['jonio', 'あべ', 'いさぢ', 'れい', 'きみたか'];

下記の記述をしたとします。

array.slice(1);

結果は「[‘あべ’, ‘いさぢ’, ‘れい’, ‘きみたか’]」です。

下記の記述をしたとします。

array.slice(1, 3);

結果は「[‘あべ’, ‘いさぢ’, ‘れい’]」です。

下記の記述をしたとします。

array.slice(-2);

結果は「[ ‘れい’, ‘きみたか’]」です。

下記の記述をしたとします。

array.slice(-3, -1);

結果は「[‘いさぢ’, ‘れい’]」です。