jQuery :first-of-type Selector - Chọn những phần tử đầu tiên theo phân loại

views

A+A-

PrintEmail

Bộ chọn :first-of-type Selector trong jQuery có đặc điểm như thế nào? Cùng tìm hiểu và so sánh sự khác biệt với :first và :first-child Selector để sử dụng đúng cách nhé.

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

Syntax

Bộ chọn jQuery :first-of-type Selector có cú pháp

$(":first-of-type")

jQuery :first-of-type Selector dùng để chọn mọi phần tử có cùng thuộc tính là phần tử đầu tiên, tuy nhiên khác với :first-child thì :first-of-type chỉ tính đến phần tử đầu tiên có thuộc tính cần tìm, kể cả có phần tử cùng cấp mà khác thuộc tính đứng trước nó.
Để thực tế và dễ hiểu hơn, chúng ta hãy cùng nhìn cây DOM HTML dưới đây để hiểu rõ hơn thế nào là first-of-type

Ở thẻ p thứ 2 vẫn  được xem là first-of-type mặc dù đứng truóc nó có thẻ div cùng cấp

Mẹo:  jQuery :first-of-type Selector giống với :nth-of-type(1) sẽ được đề cập trong bài viết sau

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

Ví dụ :first-of-type Selector

Ví dụ

Chọn tất cả phần tử <p> là phần tử đầu tiên :first-of-type

$("p:first-of-type")

Thử code »

Mẹo:
Tương tự để chọn tất cả phần tử cuối cùng thuộc tính các bạn sử dụng bộ jQuery :last-of-type Selector

Xem thêm bài viết Tất cả bộ chọn jQuery Selectors tại đây

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