Người Viết : ViKiMi Editor

Phương Thức Filter cho phép đưa ra các tiêu chí cao hơn khi Duyệt / Tìm Kiếm phần tử
Thực hiện tìm kiếm các phần tử phù hợp theo Tiêu Chí Lọc Tìm Kiếm với jQuery. Mà Cụ thể là sẽ Lọc ra các phần tử phù hợp, Còn những phần tử không phù hợp sẽ bị xoá ra khỏi vùng chọn! Cách lọc như vậy cho phép không cần phải kiểm tra là phần tử có quan hệ trên DOM như thế nào. jQuery cho phép thực hiện Lọc nâng cao hơn với Filter Method.
Để đáp ứng nhu cầu Lọc một cách nâng cao. Thực hiện các tiêu chí Lọc phần tử với những yêu cầu khắt khe + tối ưu hơn, jQuery đã cho đáp ứng bằng Filter Method.
Như vậy, thật dễ dàng kiểm tra các phần tử theo các yêu cầu khắt khe khác nhau. Dựa vào đó sẽ áp dụng các thiết kế phù hợp cho các phần tử Tìm kiếm được.
+ Chúng ta sẽ có Thiết Kế Website với chất lượng Lọc tốt nhất.
Bạn có thể dễ dàng làm những công việc sau đây :
+ Duyệt / Tìm kiếm các phần tử theo Tiêu Chí Lọc khắt khe hơn
Các phương thức được sử dụng :
+ Phương thức filter()
A ] PHƯƠNG THỨC Filter()
Phương thức filter() cho phép bạn chỉ định tiêu chí lọc phần tử Tìm Kiếm.
Các phần tử không phù hợp với tiêu chí sẽ bị xóa khỏi vùng chọn và những phần tử phù hợp sẽ được trả về.
CÚ PHÁP ::
$( SELECTOR ). filter( Param );
$( SELECTOR ). filter( Function );
[ Param ] : Selector Hoặc Elements
Function : Hàm để kiểm tra từng Phần Tử trong Tập Hợp
EXAMPLE ::
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("div"). filter(".highlights"). css( "background-color", "yellow" );
});
</script>
</head>
<body>
<h1>SỬ DỤNG FILTER METHOD</h1>
<p>Duyệt Phần tử DIV Theo Tiêu Chí trên cây DOM.</p>
<div style="border: 1px solid black;">
<h1>THẺ DIV THỨ NHẤT</h1>
<p>Đoạn Văn Bản Thứ Nhất.</p>
</div>
<br>
<div class="highlights" style="border: 1px solid black;">
<h1>THẺ DIV THỨ HAI</h1>
<p>Đoạn Văn Bản Thứ Hai.</p>
</div>
<br>
<div class="highlights" style="border: 1px solid black;">
<h1>THẺ DIV THỨ BA</h1>
<p>Đoạn Văn Bản Thứ Ba.</p>
</div>
<br>
<div style="border: 1px solid black;">
<h1>THẺ DIV THỨ TƯ</h1>
<p>Đoạn Văn Bản Thứ Tư.</p>
</div>
</body>
</html>
Hình Ảnh Kết Quả :

EXAMPLE :: KIỂM TRA TỪNG PHẦN TỬ TRONG TẬP HỢP VÀ TRẢ VỀ PHẦN TỬ ĐÚNG TIÊU CHÍ LỌC
+ Chú ý : Mỗi bước Xâu Chuỗi Chúng ta sẽ có một Kết Quả. Tạo thành Xâu Chuỗi các kết quả tiếp nối nhau .
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>filter</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
/** Thực hiện Xâu Chuỗi các Phương Thức
* + Bước 1 : Thiết lập Background là "#b4b0da" & Padding là 1.5%
* + Bước 2 : Sử dụng Filter Method với Function kiểm tra
* Từng phần Tử trong tập hợp Div. Trả về
* Phần Tử phù hợp
* + Bước 3 : Thiết lập Background là yellow
*/
$( "div" ).css({ "background" : "#b4b0da", "padding" : "1.5%" })
.filter(function( index ) {
return ( index + 1 ) % 2 == 0 || $( this ).attr( "id" ) === "fourth";
})
.css( "background", "yellow" );
});
</script>
</head>
<body>
<h1>SỬ DỤNG FILTER METHOD</h1>
<p>Duyệt Phần tử DIV Theo Tiêu Chí trên cây DOM.</p>
<div id="first" style="border: 1px solid black;">
<h1>THẺ DIV THỨ NHẤT</h1>
<p>Đoạn Văn Bản Thứ Nhất.</p>
</div>
<br>
<div id="second" style="border: 1px solid black;">
<h1>THẺ DIV THỨ HAI</h1>
<p>Đoạn Văn Bản Thứ Hai.</p>
</div>
<br>
<div id="third" style="border: 1px solid black;">
<h1>THẺ DIV THỨ BA</h1>
<p>Đoạn Văn Bản Thứ Ba.</p>
</div>
<br>
<div id="fourth" style="border: 1px solid black;">
<h1>THẺ DIV THỨ TƯ</h1>
<p>Đoạn Văn Bản Thứ Tư.</p>
</div>
<br>
<div id="fifth" style="border: 1px solid black;">
<h1>THẺ DIV THỨ NĂM</h1>
<p>Đoạn Văn Bản Thứ Năm.</p>
</div>
</body>
</html>
Hình Ảnh Kết Quả :

Chúng ta thấy rằng thật đơn giản khi Duyệt / Tìm Kiếm các phần tử sử dụng các Phương Thức Filter. Đây là cách Duyệt / Tìm Kiếm nâng cao hơn nữa được jQuery cung cấp. Với cách này bạn có thể đưa ra các tiêu chí khác nhau để Lọc các phần tử cần thiết. Qua đó sẽ có thể tạo ra các thuật toán để Lọc các phần tử >> Đưa ra thiết kê tốt hơn để phát triển.
+ jQuery luôn sử dụng Bộ chọn $( SELECTOR ) và các phương thức làm việc cùng với Bộ Chọn $( SELECTOR )
+ Công việc khi lập trình là kết hợp $( SELECTOR ) + Các Phương Thức