Previous Lesson Next Lesson

.filter() trong jQuery

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

.filter(): Giúp lọc các thành phần trong một nhóm các thành phần giống nhau.

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

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

.filter(bộ chọn)

$('li').filter('.test');

.filter(function(index){...})

$('li').filter(function(index){
    return $('strong', this).length == 1;
}).css('background-color', 'red'););

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

.filter(jquery object)

$('li').filter($('div.test'));

.filter(bộ chọ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>
<script>
$(function(){
    $('li').filter('.test').css('background-color','blue');
});
</script>
</head>

<body>
<ul>
<li>Thành phần thứ 1</li>
<li class="test">Thành phần thứ 2</li>
<li>Thành phần thứ 3</li>
<li>Thành phần thứ 4</li>
<li>Thành phần thứ 5</li>
</ul>
</body>
</html>

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

.filter('.test') đã giúp lọc ra thành phần li có class="test".

.filter(function(index){...})

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>
<script>
$(function(){
    $('li').filter(function(index) {
        return index == 2;
    }).css('background-color','blue');
});
</script>
</head>

<body>
<ul>
<li>Thành phần thứ 1</li>
<li>Thành phần thứ 2</li>
<li>Thành phần thứ 3</li>
<li>Thành phần thứ 4</li>
<li>Thành phần thứ 5</li>
</ul>
</body>
</html>

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

Với cách sử dụng như trên đã giúp lọc ra Thành phần thứ 3 (thành phần có chỉ số bằng 2, chỉ số 0 ứng với Thành phần thứ 1).

.filter(Thành phầ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>
<script>
$(function(){
    $('div').filter($('.test')).css('background-color','blue');
});
</script>
</head>

<body>
<div>Thành phần div</div>
<div class="test">Thành phần div</div>
<div>Thành phần div</div>
<div>Thành phần div</div>
<div>Thành phần div</div>
</body>
</html>

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

Với cách sử dụng như trên đã giúp lọc ra Thành phần thứ 3 (thành phần có chỉ số bằng 2, chỉ số 0 ứng với Thành phần thứ 1).

Previous Lesson Next Lesson

Preview

Viết câu trả lời

.filter() trong jQuery

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

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

.filter(bộ chọn)

.filter(function(index){...})

.filter(Thành phần)

0 Bình luận

Danh mục bài học