Hỗ trợ chọn các phần tử dựa trên vị trí của chúng trong trang. Danh sách bộ lọc vị trí như bảng sau:

Selector Mô tả
:first Chọn phần tử đầu tiên (theo ngữ cảnh) (Xem ví dụ 1)
:last Chọn phần tử cuối cùng (theo ngữ cảnh) (Xem ví dụ 2)
:even Chọn phần tử ở vị trí chẵn (theo ngữ cảnh) (Xem ví dụ 3)
:odd Chọn phần tử ở vị trí lẻ (theo ngữ cảnh) (Xem ví dụ 4)
:eq(n) Chọn phần tử vị trí thứ n (hay chỉ số n) (theo ngữ cảnh) (Xem ví dụ 5)
:gt(n) Chọn phần tử sau phần tử vị trí thứ n (hay chỉ số n) (theo ngữ cảnh) (Xem ví dụ 6)
:lt(n) Chọn phần tử trước phần tử vị trí thứ n (hay chỉ số n) (theo ngữ cảnh) (Xem ví dụ 7)


Lưu ý: Quy ước phần tử vị trí đầu tiên được gán với chỉ số 0, phần tử thứ hai được gán với chỉ số 1, v.v….Do  đó, khi nói các phần tử ở vị trí chẵn thì bắt đầu từ phần tử đầu tiên có vị trí là 0.

Xét đoạn mã HTML đơn giản sau:


<p>This is the first paragraph.</p>

<h3>This is the heading </h3>

<p>This is the second paragraph.</p>

<p>This is the last paragraph.</p>

Ví dụ 1: Chọn phần tử p đầu tiên gán màu nền là vàng, trong tập tin MyjQuery.js viết mã như sau:


$("p:first").css("background-color", "yellow");

Kết quả

Ví dụ 2: Chọn phần tử p cuối cùng gán màu nền là vàng, trong tập tin MyjQuery.js viết mã như sau:


$("p:last").css("background-color", "yellow");

Kết quả

Ví dụ 3: Chọn tất cả các phần tử p ở vị trí chẵn và gán màu nền là vàng, trong tập tin MyjQuery.js viết mã như sau:


$("p:even").css("background-color", "yellow");

Kết quả

Ví dụ 4: Chọn tất cả các phần tử p ở vị trí lẻ và gán màu nền là vàng, trong tập tin MyjQuery.js viết mã như sau:


$("p:odd").css("background-color", "yellow");

Kết quả

Ví dụ 5: Chọn tất cả các phần tử p thứ hai (chỉ số là 1) và gán màu nền là vàng, trong tập tin MyjQuery.js viết mã như sau:


$("p:eq(1)").css("background-color", "yellow");

Kết quả

Giả sử trong đoạn mã HTML trên chúng ta thêm một đoạn văn bản nữa như sau:


<p>This is the first paragraph.</p>

<h3>This is the heading </h3>

<p>This is the second paragraph.</p>

<p>This is the third paragraph.</p>

<p>This is the last paragraph.</p>

Ví dụ 6: Chọn tất cả các phần tử p đứng sau (hay dưới tuỳ theo cách nhìn) phần tử p thứ hai (chỉ số là 1) và gán màu nền là vàng, trong tập tin MyjQuery.js viết mã như sau:


$("p:gt(1)").css("background-color", "yellow");

Kết quả

Ví dụ 7: Chọn tất cả các phần tử p đứng trước (hay trên tuỳ theo cách nhìn) phần tử p thứ ba (chỉ số là 2) và gán màu nền là vàng, trong tập tin MyjQuery.js viết mã như sau:


$("p:lt(2)").css("background-color", "yellow");

Kết quả

< Học jQuery