Định nghĩa và sử dụng

  • .slice(): chọn một dãy các thành phần con từ một tập hợp thành phần cha với các chỉ số thích hợp.
  • Các chỉ số này cũng có thể mang giá trị âm, khi mang giá trị này thì cách chọn các thành phần này sẽ theo hướng ngược lại.

    • VD: .slice(-2): sẽ chọn 2 thành phần cuối.

Cấu trúc

  • Đã được thêm vào từ phiên bản 1.1.4

.slice(n)

Với một chỉ số n, một dãy thành phần con được chọn bắt đầu từ chỉ số n này.

$('li').slice(2);

.slice(start, end)

Với start là chỉ số bắt đầu dãy, end là chỉ số kết thúc dãy.

$('li').slice(2, 5);

.slice(n)

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<style>
li {
    border: 1px solid blue;
	float: left;
    height: 40px;
	list-style: none;
    width: 40px;
}
</style>
<script>
$(function(){
    $('li').slice(2).css('background','yellow');
});
</script>
</head>

<body>
<ul>
<li>01</li>
<li>02</li>
<li>03</li>
<li>04</li>
<li>05</li>
<li>06</li>
<li>07</li>
</ul>
</body>
</html>

Hiển thị trình duyệt:

Ta thấy bắt đầu từ thành phần thứ 3 trở đi đã được chọn.

So sánh code HTML trước và sau khi có jQuery:

Trước khi có jQuery Sau khi có jQuery

<ul>
<li>01</li>
<li>02</li>
<li>03</li>
<li>04</li>
<li>05</li>
<li>06</li>
<li>07</li>
</ul>

<ul>
<li>01</li>
<li>02</li>
<li style="background: yellow">03</li>
<li style="background: yellow">04</li>
<li style="background: yellow">05</li>
<li style="background: yellow">06</li>
<li style="background: yellow">07</li>
</ul>

.slice(-n)

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<style>
li {
    border: 1px solid blue;
	float: left;
    height: 40px;
	list-style: none;
    width: 40px;
}
</style>
<script>
$(function(){
    $('li').slice(-2).css('background','yellow');
});
</script>
</head>

<body>
<ul>
<li>01</li>
<li>02</li>
<li>03</li>
<li>04</li>
<li>05</li>
<li>06</li>
<li>07</li>
</ul>
</body>
</html>

Hiển thị trình duyệt:

Ta thấy 2 thành phần cuối cùng đã được chọn.

So sánh code HTML trước và sau khi có jQuery:

Trước khi có jQuery Sau khi có jQuery

<ul>
<li>01</li>
<li>02</li>
<li>03</li>
<li>04</li>
<li>05</li>
<li>06</li>
<li>07</li>
</ul>

<ul>
<li>01</li>
<li>02</li>
<li>03</li>
<li>04</li>
<li>05</li>
<li style="background: yellow">06</li>
<li style="background: yellow">07</li>
</ul>

.slice(start, end)

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<style>
li {
    border: 1px solid blue;
	float: left;
    height: 40px;
	list-style: none;
    width: 40px;
}
</style>
<script>
$(function(){
    $('li').slice(2, 5).css('background','yellow');
});
</script>
</head>

<body>
<ul>
<li>01</li>
<li>02</li>
<li>03</li>
<li>04</li>
<li>05</li>
<li>06</li>
<li>07</li>
</ul>
</body>
</html>

Hiển thị trình duyệt:

Ta thấy bắt đầu từ thành phần thứ 3 cho tới thành phần thứ 5 đã được chọn.

So sánh code HTML trước và sau khi có jQuery:

Trước khi có jQuery Sau khi có jQuery

<ul>
<li>01</li>
<li>02</li>
<li>03</li>
<li>04</li>
<li>05</li>
<li>06</li>
<li>07</li>
</ul>

<ul>
<li>01</li>
<li>02</li>
<li style="background: yellow">03</li>
<li style="background: yellow">04</li>
<li style="background: yellow">05</li>
<li>06</li>
<li>07</li>
</ul>

.slice(start, end)

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<style>
li {
    border: 1px solid blue;
	float: left;
    height: 40px;
	list-style: none;
    width: 40px;
}
</style>
<script>
$(function(){
    $('li').slice(-5, -2).css('background','yellow');
});
</script>
</head>

<body>
<ul>
<li>01</li>
<li>02</li>
<li>03</li>
<li>04</li>
<li>05</li>
<li>06</li>
<li>07</li>
</ul>
</body>
</html>

Hiển thị trình duyệt:

Ta thấy bắt đầu từ thành phần thứ 3 cho tới thành phần thứ 5 đã được chọn.

So sánh code HTML trước và sau khi có jQuery:

Trước khi có jQuery Sau khi có jQuery

<ul>
<li>01</li>
<li>02</li>
<li>03</li>
<li>04</li>
<li>05</li>
<li>06</li>
<li>07</li>
</ul>

<ul>
<li>01</li>
<li>02</li>
<li style="background: yellow">03</li>
<li style="background: yellow">04</li>
<li style="background: yellow">05</li>
<li>06</li>
<li>07</li>
</ul>