Định nghĩa và sử dụng

  • .end(): Chấm dứt hoạt động lọc mới nhất trong chuỗi hiện tại và quay trở lại các thiết lập của các thành phần phù hợp với trạng thái trước đó.
  • Với cách sử dụng .end() chúng ta không cần phải thao tác trên từng thành phần riêng lẻ, mà có thể ngay lập tức thực hiện thao tác tiếp theo, xâu chuỗi các phương thức lại với nhau.

Cấu trúc

  • Đã được thêm vào từ phiên bản 1.0

.end()

$('p').find('blue').end().find('red');

.end()

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $('ul').find('.blue')
    .css('background-color','blue')
    .end().find('.red')
    .css('background-color','red')
});
</script>
</head>

<body>
<ul>
<li class="red">list 01</li>
<li>list 02</li>
<li>list 03</li>
<li>list 04</li>
<li class="blue">list 05</li>
<li class="red">list 06</li>
</ul>
</body>
</html>

Hiển thị trình duyệt:

Sau khi hoàn thành việc tìm các thành phần class="blue", phương thức .end() sẽ giúp tiếp tục tìm các thành phần với tên class="red", với cách này không làm gián đoạn việc tìm kiếm các thành phần mong muốn.

So sánh code HTML trước và sau khi có jQuery:

Trước khi có jQuery Sau khi có jQuery

<ul>
<li class="red">list 01</li>
<li>list 02</li>
<li>list 03</li>
<li>list 04</li>
<li class="blue">list 05</li>
<li class="red">list 06</li>
</ul>

<ul>
<li class="red" style="background-color: red">list 01</li>
<li>list 02</li>
<li>list 03</li>
<li>list 04</li>
<li class="blue" style="background-color: blue">list 05</li>
<li class="red" style="background-color: red">list 06</li>
</ul>