jQuery更新变量引用DOM元素

Question

我有2个变量设置如下：

var carousel = $('div.carousel ul');
var pics = carousel.children('li');

稍后，使用<li>将一些新的insertBefore()添加到轮播中，但我的pics变量现已过期，因此我必须再次拨打pics = carousel.children('li');功能

如果没有重复遍历DOM，有没有更好的方法呢？

Answer 1

jQuery有一个add()函数，它将接受一个参数并将其添加到所选项的列表中。每当您向DOM添加新列表项时，都可以调用pics.add(newli);。

Answer 2

我喜欢存储jQuery对象以避免在整个地方都有选择器。所以我创建了一个微插件，用update函数扩展jQuery对象。您可以找到the gist here

以下是供参考的代码：

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

Answer 3

为什么pics = carousel.children('li');这么费时？

如果列表已经更改，似乎可以再次执行此操作，但如果您确定要避免它，请尝试将2个新创建的li添加到新数组中，然后向其中添加图片。