Làm thế nào để cập nhật một đối tượng jQuery chứa danh sách các yếu tố sau khi di chuyển một yếu tố

Question

Có một danh sách các yếu tố, chúng ta hãy nói một số hình ảnh:

<img src="" alt=""> 
<img src="" alt=""> 
<img src="" alt=""> 

Tôi chọn chúng và lưu trữ kết quả trong một biến:

var elements = $('img'); 

Bây giờ tôi muốn đưa hình ảnh cuối cùng đến vị trí đầu tiên. Nó hoạt động tốt như thế này:

elements.first().before(elements.last()); 

Sau đó đối tượng elements vẫn giữ nguyên giá trị theo thứ tự trước đó. Tôi có thể cập nhật điều này bằng cách truy vấn lại sau ca làm việc:

elements = $('img'); 

Nhưng có vẻ như không hiệu quả khi chạy một truy vấn khác khi tôi đã có tất cả các phần tử với nhau. Ngoài ra, vì nó không phải là một mảng, điều này sẽ không hoạt động:

elements.unshift(elements.pop()); 

Cách tốt nhất để cập nhật danh sách đối tượng trong trường hợp này là gì?

Answer 1

giả mạo nó!

[].unshift.call(elements, [].pop.call(elements)) 

Demo

---

Caveat: Tôi nghi ngờ này là nhanh hơn so với tái thực hiện truy vấn.

Answer 2

<div class="container"> 
<img src="" alt=""> 
<img src="" alt=""> 
<img src="" alt=""> 
</div> 

---

$('.container img:last-child').prependTo('.container'); //would work 

$('img:last', elements).prependTo(elements); 
// i think this will also work if you need to cache it 

Answer 3

Có hai điều xảy ra ở đây.

Bạn có một tập hợp các phần tử trong DOM và một biến chứa một đoạn DOM tham chiếu đến các phần tử đó.

Hàm jQuery first() và last() đang di chuyển các phần tử trong DOM, nhưng chúng không biết gì về biến đó.

Từ một quan điểm đơn giản về mã, mã được đề xuất của bạn là dễ đọc nhất và sẽ ổn nếu bạn không gọi nó nhiều.

elements = $('img'); 

Nếu không, lần lượt biến thành một mảng:

var elementsarray = []; 
elements.each(function(i) { elementsarray[] = this; });