jQuery lặp lại - phương pháp eq()
Mô hình
Bằng cách thêm lớp phù hợp cho div có index là 2, bạn có thể chuyển nó thành màu xanh dương:
$("body").find("div").eq(2).addClass("blue");
Định nghĩa và cách sử dụng
Phương pháp eq() sẽ thu hẹp tập hợp phần tử để phù hợp với phần tử trên index được chỉ định.
Cú pháp
.eq(index)
| Tham số | Mô tả |
|---|---|
| index |
Số nguyên, chỉ ra vị trí của phần tử (thuộc tính nhỏ nhất là 0). Nếu là số âm, nó sẽ đếm ngược từ phần tử cuối cùng của tập hợp. |
Giải thích chi tiết
Nếu cung cấp đối tượng jQuery biểu thị tập hợp phần tử DOM, phương pháp .eq() sẽ sử dụng một phần tử trong tập hợp để tạo ra một đối tượng jQuery mới. Tham số index được sử dụng để chỉ ra vị trí của phần tử trong tập hợp.
Xin xem danh sách đơn giản này dưới đây:
<ul> <li>mục danh sách 1</li> <li>mục danh sách 2</li> <li>mục danh sách 3</li> <li>mục danh sách 4</li> <li>mục danh sách 5</li> </ul>
Ví dụ 1
Chúng ta có thể áp dụng phương pháp này cho tập hợp mục danh sách này:
$('li').eq(2).css('background-color', 'red');
Kết quả của cuộc gọi này là đặt nền đỏ cho mục 3. Lưu ý rằng index dựa trên số 0 và là vị trí của phần tử trong đối tượng jQuery,而不是 trong cây DOM.
Ví dụ 2
Nếu cung cấp số âm, nó chỉ ra vị trí bắt đầu từ cuối tập hợp,而不是 từ đầu. Ví dụ:
$('li').eq(-2).css('background-color', 'red');
Lần này, nền của mục 4 trở nên đỏ, vì nó là mục thứ hai bắt đầu từ cuối tập hợp.
Ví dụ 3
Nếu không thể tìm thấy phần tử dựa trên tham số index được chỉ định, phương pháp này sẽ tạo ra đối tượng jQuery chứa tập hợp rỗng, thuộc tính length là 0.
$('li').eq(5).css('background-color', 'red');
Ở đây, không có mục danh sách nào sẽ trở nên đỏ, vì .eq(5) chỉ định mục danh sách thứ sáu.
