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