Làm thế nào để cập nhật một đối tượng jQuery được lưu trữ trong một biến sau khi thay đổi DOM?

Question

Tôi thường lưu trữ các đối tượng jQuery của mình trong các biến để tránh có bộ chọn được ghi trên tất cả các vị trí.

Khi tôi thay đổi DOM, tôi muốn tự cập nhật đối tượng. Bỏ các tài liệu tham khảo chưa sử dụng và cập nhật các tài liệu mới. Tôi có thể làm cái này như thế nào? Lý tưởng nhất là tôi muốn làm điều gì đó với logic sau:

var test = $('div.bar'); 
console.log(test); 
>> [<div class="bar" id="b1"></div>, <div class="bar" id="b2"></div>] 

$('#b2').remove(); 
console.log(test); 
>> [<div class="bar" id="b1"></div>, <div class="bar" id="b2"></div>] 

test.update(); 
console.log(test); 
>> [<div class="bar" id="b1"></div>] 

$('body').append('<div class="bar" id="b3"></div>'); 
console.log(test); 
>> [<div class="bar" id="b1"></div>] 

test.update(); 
console.log(test); 
>> [<div class="bar" id="b1"></div>, <div class="bar" id="b3"></div>] 

Answer 1

This plugin giải quyết vấn đề đó:

(function ($) { 
    $.fn.update = function(){ 
    var newElements = $(this.selector),i;  
    for(i=0;i<newElements.length;i++){ 
     this[i] = newElements[i]; 
    } 
    for(;i<this.length;i++){ 
     this[i] = undefined; 
    } 
    this.length = newElements.length; 
    return this; 
    }; 
})(jQuery); 

Chỉ cần thêm nó vào mã của bạn và làm:

var $foo = $("div.bar"); // selects all "div.bar" 
(... many dom modifications ...) 
$foo.update();