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, чтобы избежать повсеместного выделения селекторов.Поэтому я создал микро-плагин для расширения объектов jQuery функцией update.Вы можете найти суть здесь

Вот код для справки:

(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 2

jQuery имеет функцию add(), которая принимает аргумент и добавляет его в список выбранных элементов.Вы можете звонить pics.add(newli); каждый раз, когда добавляете новый элемент списка в DOM.

Answer 3

Почему pics = carousel.children('li'); занимает так много времени?

Кажется, можно сделать это снова, если список изменился, но если вы действительно уверены, что хотите его избежать, попробуйте добавить 2 новых созданных li в новый массив, а затем добавить к нему фотографии.