jQuery Selectors - Child Filter - jQuery căn bản

Child Filter Selector cũng có chức năng giống như Basic Filter nhưng jQuery nó chia làm hai nhóm để chúng ta dễ học và dễ tìm kiếm hơn. Nhóm Child Filter có liên quan đến vấn đề xử lý lọc các thẻ HTML con của một thẻ HTML cha, điều này cũng tương tự như một số filters mà ở bài Basic Filter ta đã học.

1. Danh sách các Child Filter trong jQuery

Sau đây là danh sách các Child Filter trong jQuery mà chúng ta nên biết.

Đối với các selector có truyền giá trị index thì ngoài việc truyền số vào thì bạn có thể truyền theo công thức dưới đây:

• even: Tìm theo số lẻ
• odd: Tìm theo số chẵn
• 2n+1: Các số 1, 3, 5, 7, ...
• 3n + 1: Các số 1, 4, 7, ...
• 3n: Các số 3, 6, 9, ...
• Tương tự bạn có thể tự ra công thức riêng

2. Các ví dụ Child Filter trong jQuery

Sau đây là các ví dụ cách sử dụng Child Filter trong jQuery.

:first-child Selector

Khi hover chuột vào thẻ span đầu tiên nằm trong thẻ div thì sẽ bổ sung class selected.

$("div span:first-child")
        .hover(function () {
            $(this).addClass("selected");
        }, function () {
            $(this).removeClass("selected");
        });

:first-of-type Selector

Thêm class active vào thẻ span đầu tiên trong danh sách các thẻ có tên là span cùng cấp với nhau.

$("span:first-of-type").addClass("active");

:last-child Selector

Khi hover chuột vào thẻ span cuối cùng nằm trong thẻ div thì sẽ bổ sung class selected.

$("div span:last-child")
        .hover(function () {
            $(this).addClass("selected");
        }, function () {
            $(this).removeClass("selected");
        });

:last-of-type Selector

Thêm class active vào thẻ co tên là span cuối cùng trong danh sách các thẻ span cùng cấp với nhau.

$("span:last-of-type").addClass("active");

:nth-child( index ) Selector

Thêm class active vào thẻ li thứ hai nằm trong thẻ ul.

$("ul li:nth-child(2)").addClass("active");

:nth-last-child( index ) Selector

Thêm class active vào thẻ li thứ hai tính từ dưới lên nằm trong thẻ ul.

$("ul li:nth-last-child(2)").addClass("active");

:nth-last-of-type( index ) Selector

Thêm class active vào thẻ con có tên là li thứ hai tính từ dưới lên nằm trong thẻ ul.

$("ul li.delete:nth-last-of-type(2)").addClass("active");

:ntn-of-type( index ) Selector

Thêm class active vào thẻ con có tên là li thứ ba tính từ trên xuống nằm trong thẻ ul.

$("ul li:nth-of-type(3)").addClass("active");

:only-child Selector:

Thêm class active vào thẻ li là con duy nhất của thẻ ul.

$("ul li:only-child").addClass("active");

:only-of-type Selector

Thêm class active vào thẻ có tên là li và là con duy nhất của thẻ ul.

$("ul li:only-of-type").addClass("active");

3. Lời kết

Với danh sách các Child Filter này bạn có thể sàn lọc mọi thẻ HTML rất dễ dàng và nhanh hơn rất nhiều khi sử dụng Javascript thuần, kết hợp với các Basic Filter nữa thì như hổ mọc thêm cánh :D.

Bài này mình sẽ dừng ở đây, bài tiếp theo chúng ta sẽ tìm hiểu về Content Filter.