Đị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
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);
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> |
<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> |
<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> |
<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> |
<ul> |