sliceとは
- ここで説明する slice とは次の語句からなるjQueryのメソッドです。
- slice
- 読み: スライス
意味: 切る、一切れ、一枚、薄切り、部分
sliceメソッドの概要
このメソッドは、呼び出し元要素群のセットから、メソッドの引数に指定されたインデックス番号の範囲で要素群のサブセットを取得します。
つまり、呼び出し元のセレクターにマッチした要素群から、更にインデックス番号の範囲で絞り込んだ要素群として取得できるということです。
引数には正と負の数値を与えることができます。
このslice()は、言葉の意味どおり要素群を切り分けます。
引数には切り分けの開始位置と終了位置を指定できますが、指定位置の前で切り分けることに注意してください。
具体的にいうと、開始位置に「2」を指定すると、インデックスの「2」は含まれます。
しかし、終了位置を「5」に指定した場合、インデックスの「5」は含まれません。
これはslice()の特性であり、開始位置の前と終了位置の前の部分で要素群を切り分けるからです。
構文
サンプルを見る前に構文を確認しておきます。
var objElements = $(Selector).slice(start[, end])サンプルコードと実行結果
ここでは、li 要素を題材にします。
呼び出し元のセレクターで li 要素を取得して、slice()を使ってインデックスで要素を絞り込みます。 マッチした要素は背景色を変更するようにしていますので視認し易いはずです。
このメソッドは「切り分け」という考えをもってインデックスの設定をする必要があります。 具体的にはサンプルの実行結果をみていただければ解決すると思います。 また、このメソッドの引数には負の数値を指定することができますので、合わせてサンプルで紹介しています。
サンプルコード: CSS
<style>
li{
border: thin solid currentColor;
margin: 5px;
padding: 5px;
list-style: none;
}
</style>
サンプルコード: HTML
<head>
<style>...</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<button id="idButton1">Click1</button>
<ul>
<li>ListItem</li>
<li>ListItem</li>
<li>ListItem</li>
<li>ListItem</li>
<li>ListItem</li>
</ul>
<button id="idButton2">Click2</button>
<script>...</script>
</body>
- 06: button (ボタンです。クリックすると script 02 ~ 04 のコードが実行されます。)
- 08-12: li (li要素です。この要素群からslice()を使って要素の絞り込みを行います。)
- 14: button (ボタンです。クリックすると script 05 ~ 07 のコードが実行されます。)
サンプルコード: script
<script>
$("#idButton1").click(function(){
$("li").slice(1, 3).css("background-color", "##lightblue");
});
$("#idButton2").click(function(){
$("li").slice(-3, -1).css("background-color", "##lightpink");
});
</script>
- 02-04: $("#idButton1").click(function(){処理}) (id="idButton1" の要素がクリックされると 処理 を実行します。)
- 03: slice(1, 3) (呼び出し元の要素群をインデクス番号の 1 の前と 3 の前で切り分けます。)
- 05-07: $("#idButton2").click(function(){処理}) (id="idButton2" の要素がクリックされると 処理 を実行します。)
- 06: slice(-3, -1) (呼び出し元の要素群をインデクス番号の -3 の前と -1 の前で切り分けます。もしも -3 から最後の要素までを取得したいなら、終了位置にあたる -1 を指定しないでください。)
- ListItem: index 0 (-5)
- ListItem: index 1 (-4)
- ListItem: index 2 (-3)
- ListItem: index 3 (-2)
- ListItem: index 4 (-1)