如何在DOM更改后更新存储在变量中的jQuery对象

How to update a jQuery object stored in a variable after DOM change?

本文关键字：变量 jQuery 对象 存储 DOM 更新      更新时间：2023-09-26

我通常将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>]

这个插件解决了这个问题:

(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();
相关文章：