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

jQuery Selectors - Child Filter

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.

Cú pháp Ý nghĩa
$("selector:first-child") Lấy thẻ con đầu tiên của thẻ cha. DEMO
$("selector:first-of-type") Chọn thẻ HTML con đầu tiên theo tag name. DEMO
$("selector:last-child") Lấy thẻ con cuối cùng của thẻ cha. DEMO
$("selector:last-of-type") Chọn thẻ HTML con cuối cùng theo tag name. DEMO
$("selector:nth-child( index )") Chọn thẻ HTML con thứ index. DEMO
$("selector:nth-last-child( index )") Chọn thẻ HTML con thứ index tính từ dưới lên. DEMO
$("selector:nth-last-of-type( index )") Chọn thẻ HTML con thứ index tính từ dưới lên theo tag name. DEMO
$("selector:nth-of-type( index )") Chọn thẻ HTML con thứ index tính từ trên xuống theo tag name. DEMO
$("selector:only-child") Chọn thẻ HTML là con duy nhất của thẻ cha. DEMO
$("selector:only-of-type") Chọn thẻ HTML là con duy nhất của thẻ cha theo tag name. DEMO

Đố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.

Bài viết được đăng tại freetuts.net

: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.

Demo RUN
$("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.

Demo RUN
$("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.

Demo RUN
$("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.

Demo RUN
$("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.

Demo RUN
$("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.

Demo RUN
$("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.

Demo RUN
$("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.

Demo RUN
$("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.

Demo RUN
$("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.

Demo RUN
$("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.

Bình luận đã đóng, nếu có thắc mắc hãy đặt câu hỏi tại hoicode.com để admin trả lời.

BÀI VIẾT

notice png LIST home png HOME hot gif BÁO
LỖI
top png TOP