jQuery API の slice( start[, end] ) は、マッチした要素のうち、インデックス番号が、start以上end未満の範囲内である要素を選択するメソッド。
引数
- start
数値で指定する。
ここで指定した数値以上のインデックス番号が範囲となる。
負数の場合、末尾からのオフセットを示す。
- end
オプション。
数値で指定する。
ここで指定した数値未満のインデックス番号が範囲となる。
負数の場合、末尾からのオフセットを示す。
記述方法
jQuery( セレクター ) . slice( インデックス番号A, インデックス番号B );
「セレクター」にマッチした要素のうち、インデックス番号が、「インデックス番号A」以上「インデックス番号B」未満である要素を選択。
記述例
jQuery( '#smaple td' ) . slice( 2, 7 );
idが「smaple」であるtable要素内のtd要素のうち、インデックス番号が、「2」以上「7」未満である要素を選択。
実装例(サンプル)
セル | セル | セル |
セル | セル | セル |
セル | セル | セル |
実装例(サンプル)のソースコード
JavaScript
<script type="text/javascript">
<!--
jQuery( function() {
jQuery( '#jquery-api-sample td' ) . slice( 1, 4 ) . css( {
backgroundColor: 'yellow',
color: 'red',
} );
jQuery( '#jquery-api-sample td' ) . slice( -4, -1 ) . css( {
backgroundColor: 'pink',
color: 'blue',
} );
} );
// -->
</script>
<!--
jQuery( function() {
jQuery( '#jquery-api-sample td' ) . slice( 1, 4 ) . css( {
backgroundColor: 'yellow',
color: 'red',
} );
jQuery( '#jquery-api-sample td' ) . slice( -4, -1 ) . css( {
backgroundColor: 'pink',
color: 'blue',
} );
} );
// -->
</script>
HTML
<table id="jquery-api-sample">
<tr>
<td>セル</td>
<td>セル</td>
<td>セル</td>
</tr>
<tr>
<td>セル</td>
<td>セル</td>
<td>セル</td>
</tr>
<tr>
<td>セル</td>
<td>セル</td>
<td>セル</td>
</tr>
</table>
<tr>
<td>セル</td>
<td>セル</td>
<td>セル</td>
</tr>
<tr>
<td>セル</td>
<td>セル</td>
<td>セル</td>
</tr>
<tr>
<td>セル</td>
<td>セル</td>
<td>セル</td>
</tr>
</table>