jQuery :last-child Selector - Chọn những phần tử con cuối cùng

views

A+A-

PrintEmail

Làm thể nào sử dụng jQuery để chọn các phần tử có cùng thuộc tính là phần tử con cuối cùng. Chúng ta cùng tìm hiểu về :last-child Selector và so sánh sự khác nhau với :last Selector trong jQuery nhé

Cú pháp, Khái niệm và cách sử dụng jQuery :last-child Selector

Syntax

Bộ chọn jQuery :last-child Selector có cú pháp

$(":last-child")

jQuery :last-child Selector dùng để chọn mọi phần tử có cùng thuộc tính là phần tử con cuối cùng và không có phần tử cùng cấp nào mang thuộc tính khác đứng sau nó. Tức theo cây thư mục DOM HTML thì trên phần tử đó sẽ là phần tử cha, và nó được xếp ở vị trí cuối cùng trong nhánh.
Cùng nhìn hình dưới đây để xem phần tử last-child của <p> trong cây DOM sau:

Cây DOM HTML trên có nhiều thẻ p nhưng chỉ có 2 thẻ p viền cam được gọi là lastChild

Lưu ý:
Khác với :last vì :last selector chỉ chọn 1 phần tử cuối cùng và duy nhất

Cùng xem Sự khác nhau giữa :last và :last-child

Ví dụ :last-child Selector

Ví dụ

Chọn mọi phần tử <p> là phần tử con đầu tiên

$("p:last-child")

Thử code »

Tương tự sử dụng jQuery Selector này để chọn tất cả phần tử là phần tử con đầu tiên có class="intro"

$(".intro:last-child")

Thử code »

Mẹo:
Để chọn tất cả phần tử con đầu tiên các bạn sử dụng bộ jQuery :first-child Selector

Xem thêm bài viết jQuery Selectors tại đây

Chuyên Mục : Bộ chọn jQuery Học jQuery jQuery Selectors