14/08/2018, 09:51
:last Selector trong jquery
Last Selector sẽ chọn phần tử cuối cùng trong số các phần tử DOM tìm được. Last Selector sẽ chỉ chọn được một phần tử thông qua việc lọc các kết quả của selector hiện tại và trả về phần tử cuối cùng tìm được trong các kết quả đó. Chú ý : Bởi vì :last là một Jquery ...
Last Selector sẽ chọn phần tử cuối cùng trong số các phần tử DOM tìm được.
Last Selector sẽ chỉ chọn được một phần tử thông qua việc lọc các kết quả của selector hiện tại và trả về phần tử cuối cùng tìm được trong các kết quả đó.
Chú ý:
- Bởi vì :last là một Jquery extension và không phải là một phần thiết lập của CSS, các truy vấn sử dụng :last sẽ không thể phát huy hiệu quả của phương thức querySelectorAll(). Để đạt được hiệu quả cao nhất khi sử dụng, trước tiên hãy sử dụng một selector được thiết lập bởi CSS, sau đó sử dụng .filter(":last") để lọc lại kết quả muốn lấy.
Cú pháp
Cú pháp
jQuery( ":last" )
Ví dụ
Tìm kiếm thẻ p cuối cùng xuất hiện trong tài liệu và đổi màu chữ cho chúng:
Code
RUN
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Học lập trình miễn phí tại code24h.com</title>
<script src="https://code24h.com/cnd/js/jquery/jquery-3.2.1.min.js"></script>
</head>
<body>
<h1>Học lập trình miễn phí tại code24h.com</h1>
<div>
<p>Đây là thẻ p đầu tiên</p>
<p>Đây là thẻ p thứ 2</p>
<p>Đây là thẻ p thứ 3</p>
</div>
<div>
<p>Đây là thẻ p thứ 4</p>
<p>Đây là thẻ p thứ 5</p>
<p>Đây là thẻ p thứ 6</p>
</div>
<button onclick="myFunction()">Click vào đây để xem kết quả</button>
<script>
function myFunction(){
$( "p:last" ).css( "color", "red");
}
</script>
</body>
</html>Kết quả:
Tham khảo: jquery.com
Các loại api khác
- jQuery Selector
- jQuery Events
Nguồn: code24h.com
