如何在DOM更改後更新存儲在變量中的jQuery對象？

Question

我通常將我的jQuery對象存儲在變量中，以避免選擇器遍佈整個地方。

當我更改DOM時，我想讓對象自己更新。刪除未使用的引用並更新新的引用。我怎樣才能做到這一點？理想的情況是我想要做的事有以下邏輯：

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解決了這個問題：

(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); 

只需將其添加到您的代碼，並做到：

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