jQuery duyệt - phương thức filter()
Mô hình
Thay đổi màu sắc của tất cả các div, sau đó thêm viền cho lớp có tên là "middle":
$("div").css("background", "#c8ebcc")
.filter(".middle")
.css("border-color", "red");
Định nghĩa và cách sử dụng
Phương pháp .filter() sẽ thu hẹp tập hợp phần tử khớp thành các phần tử khớp với bộ lọc đã chỉ định.
Cú pháp
.filter(selector)
| Parameter | Mô tả |
|---|---|
| selector | Giá trị chuỗi, chứa biểu thức bộ lọc để khớp với tập hợp phần tử hiện tại. |
Mô tả chi tiết
Nếu có đối tượng jQuery đại diện cho tập hợp phần tử DOM, phương pháp .filter() sẽ tạo ra một đối tượng jQuery mới từ tập hợp các phần tử khớp. Bộ lọc được sử dụng sẽ kiểm tra mỗi phần tử; tất cả các phần tử khớp với bộ lọc sẽ được bao gồm trong kết quả.
Hãy suy nghĩ về trang web đơn giản với danh sách này:
<ul> <li>mục danh sách 1</li> <li>mục danh sách 2</li> <li>mục danh sách 3</li> <li>mục danh sách 4</li> <li>mục danh sách 5</li> <li>mục danh sách 6</li> </ul>
Chúng ta có thể áp dụng phương pháp này đối với tập hợp các mục danh sách này:
$('li').filter(':even').css('background-color', 'red');
Kết quả của cuộc gọi này là đặt màu nền của các mục 1, 3, 5 là đỏ, vì chúng đều khớp với bộ lọc (nhớ lại, :even và :odd đều sử dụng index dựa trên 0).
Sử dụng hàm lọc
Hình thức thứ hai của phương pháp này là, lọc các phần tử thông qua hàm thay vì qua bộ lọc chọn lọc. Đối với mỗi phần tử, nếu hàm trả về true, phần tử sẽ được bao gồm trong tập hợp đã lọc; ngược lại, phần tử sẽ bị loại bỏ.
Xin xem đoạn HTML phức tạp này bên dưới:
<ul> <li><strong>mục</strong> danh sách 1 - một thẻ strong</li> <li><strong>mục</strong> danh sách <strong>2</strong> - hai <span>thẻ strong</span></li> <li>mục danh sách 3</li> <li>mục danh sách 4</li> <li>mục danh sách 5</li> <li>mục danh sách 6</li> </ul>
Chúng ta có thể chọn các mục danh sách này và lọc chúng dựa trên nội dung của chúng:
$('li').filter(function(index) {
return $('strong', this).length == 1;
).css('background-color', 'red');
