Bài 07: 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ẻ cha, điều này cũng tương tự như một số Filter mà ở bài Basic Filter đã 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 con số vào thì bạn có thể truyền theo công thức:

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

XEM DEMO

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

XEM DEMO

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

XEM DEMO

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

XEM DEMO

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

XEM DEMO

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

XEM DEMO

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

XEM DEMO

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

XEM DEMO

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

XEM DEMO

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

XEM DEMO

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

Hãy để lại link bài viết gốc khi chia sẻ bài viết này, mình sẽ report DMCA với những website lấy nội dung mà không để nguồn hoặc copy bài với số lượng lớn.

Nguồn: freetuts.net

Profile photo of adminTheHalfHeart

TheHalfHeart

Có sở thích viết tuts nên đã từng tham gia viết ở một số diễn đàn, đến năm 2014 mới có điều kiện sáng lập ra freetuts.net. Sinh năm 90 và có 1 vợ 2 con, thích ca hát và lập trình.

ĐĂNG BÌNH LUẬN: Đăng câu hỏi trên Group Facebook để được hỗ trợ nhanh nhất.