Come aggiornare un oggetto jQuery memorizzato in una variabile dopo la modifica DOM?

Question

Normalmente memorizzo i miei oggetti jQuery in variabili per evitare che il selettore venga scritto dappertutto.

Quando cambio il DOM, vorrei rendere l'aggiornamento dell'oggetto stesso. Eliminazione di riferimenti inutilizzati e aggiornamento con quelli nuovi. Come posso fare questo? Idealmente voglio fare qualcosa con la seguente logica:

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 risolve questo problema:

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

Basta aggiungere al tuo codice e fare:

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