Previous Lesson Next Lesson

.slice() trong jQuery

Định nghĩa và sử dụng .slice() trong jQuery

.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 .slice() trong jQuery

Đã đượ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="http://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.

.slice(-n)

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="http://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.

.slice(start, end)

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="http://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.

.slice(start, end)

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="http://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.

Previous Lesson Next Lesson

Preview

Viết câu trả lời

0 Bình luận

bắt đầu chủ đề từ ·

@ ·

.slice() trong jQuery

Định nghĩa và sử dụng .slice() trong jQuery

Cấu trúc .slice() trong jQuery

.slice(n)

.slice(-n)

.slice(start, end)

.slice(start, end)

0 Bình luận

Danh mục bài học