jQuery 遍历 - end() 方法

Hướng dẫn duyệt jQuery

实例

选择所有段落，找到这些段落中的 span 元素，然后将它们恢复为段落，并把段落设置为两像素的红色边框：

$("p").find("span").end().css("border", "2px red solid");

Hãy thử trực tiếp

定义和用法

end() 方法结束当前链条中的最近的筛选操作，并将匹配元素集还原为之前的状态。

语法

.end()

详细说明

大多数 jQuery 的遍历方法会操作一个 jQuery 对象实例，并生成一个匹配不同 DOM 元素集的新对象。当发生这种情况时，应该会把新的元素集推入维持在对象中的堆栈内。每次成功的筛选方法调用都会把新元素推入堆栈中。如果我们需要老的元素集，可以使用 end() 从堆栈中弹出新集合。

Giả sử trang web có một cặp danh sách rất ngắn:

<ul class="first">
   <li class="foo">danh mục mục 1</li>
   <li>danh mục mục 2</li>
   <li class="bar">danh mục mục 3</li>
</ul>
<ul class="second">
   <li class="foo">danh mục mục 1</li>
   <li>danh mục mục 2</li>
   <li class="bar">danh mục mục 3</li>
</ul>

Ví dụ 1

jQuery rất hữu ích khi sử dụng tính chất chuỗi (chuỗi lệnh) của jQuery. Nếu không sử dụng chuỗi lệnh, chúng ta thường gọi đối tượng trước đó bằng tên biến, vì vậy chúng ta không cần thao tác với ngăn xếp. Tuy nhiên, thông qua end(), chúng ta có thể nối tất cả các phương thức gọi lại với nhau:

$('ul.first').find('.foo').css('background-color', 'red')
  .end().find('.bar').css('background-color', 'green');

Hãy thử trực tiếp

Lệnh chuỗi này tìm kiếm các mục có tên lớp là foo trong danh sách đầu tiên và đặt nền của chúng thành màu đỏ. end() sẽ trả lại đối tượng về trạng thái ban đầu trước khi gọi find(), vì vậy find() thứ hai tìm kiếm '.bar' trong <ul class="first">, không phải trong <li class="foo"> của danh sách, và đặt nền của các phần tử phù hợp thành màu xanh lá cây. Kết quả cuối cùng là các mục 1 và 3 trong danh sách đầu tiên được đặt nền có màu, trong khi các mục trong danh sách thứ hai không thay đổi.

Ví dụ 2

Dãy dài jQuery này có thể được visual hóa như một khối mã cấu trúc, phương thức filter mở khối mã嵌套, và phương thức end() dùng để đóng khối mã:

$('ul.first').find('.foo')
  .css('background-color', 'red')
.end().find('.bar')
  .css('background-color', 'green')
.end();

Hãy thử trực tiếp

Cuối cùng, phương thức end() không bắt buộc vì chúng ta sẽ loại bỏ đối tượng jQuery sau này. Tuy nhiên, nếu viết mã theo hình thức này, end() sẽ cung cấp sự đối xứng về mặt視 giác và cảm giác gọn gàng hơn cho chương trình, ít nhất là dễ đọc hơn đối với nhà phát triển, nhưng giá phải trả là một chút mất mát hiệu suất do gọi thêm phương thức.

Hướng dẫn duyệt jQuery