Как обновить сохраненную и сфотографированную переменную селектора jquery

Вчера я столкнулся с проблемой с jquery-селектором, который я назначил переменной, и это сводит меня с ума.

Вот jsfiddle с testcase:

  • назначьте .elem моему obj var
  • запишите обе длины на консоль. Результат = > 4
  • Удалите # 3 из DOM
  • log obj на консоли = > удаленный # 3 все еще существует, а длина - 4. Я понял, что запрос jquery снят? к переменной и не может? не будет? обновляться
  • log.elem к консоли.. yep Результат = > 3, а # 3 ушел
  • Теперь я обновляю .elem с новой шириной 300
  • logging obj и obj.width дает мне 300.. Итак, снимок был обновлен? Интересно, что 3 из 4 divs имеют новую ширину, но удаленный № 3 не...

Еще одно испытание: добавление элемента li в domtree и ведение журнала obj и .elem. .elem имеет новые li и obj не делает, потому что он все еще старый снимок

http://jsfiddle.net/CBDUK/1/

Нет ли способа обновить этот объект с новым контентом? Я не хочу создавать новый obj, потому что в моем приложении есть много информации, сохраненной в этом объекте, я не хочу уничтожать...

Ответы

Ответ 1

Да, это снимок. Кроме того, удаление элемента из дерева DOM страницы не волшебным образом приведет к исчезновению всех ссылок на элемент.

Вы можете обновить его так:

var a = $(".elem");

a = $(a.selector);

Mini-плагин:

$.fn.refresh = function() {
    return $(this.selector);
};

var a = $(".elem");

a = a.refresh();

Это простое решение не работает со сложными обходами. Вам нужно будет сделать синтаксический анализатор для свойства .selector для обновления моментального снимка для них.

Формат выглядит следующим образом:

$("body").find("div").next(".sibling").prevAll().siblings().selector
//"body div.next(.sibling).prevAll().siblings()"

Мини-плагин на месте:

$.fn.refresh = function() {
    var elems = $(this.selector);
    this.splice(0, this.length);
    this.push.apply( this, elems );
    return this;
};

var a = $(".elem");
a.refresh() //No assignment necessary

Ответ 2

Мне также понравилось решение @Esailija, но кажется, что у этого.селектора есть некоторые ошибки с фильтром. Поэтому я изменил свои потребности, возможно, кому-то это будет полезно

Это было для jQuery 1.7.2, который не тестировал обновление на отфильтрованных снимках в более высоких версиях

$.fn.refresh = function() { // refresh seletor
    var m = this.selector.match(/\.filter\([.\S+\d?(\,\s2)]*\)/); // catch filter string
    var elems = null;
    if (m != null) { // if no filter, then do the evarage workflow
        var filter = m[0].match(/\([.\S+\d?(\,\s2)]*\)/)[0].replace(/[\(\)']+/g,'');
        this.selector = this.selector.replace(m[0],''); // remove filter from selector
        elems = $(this.selector).filter(filter); // enable filter for it
    } else {
        elems = $(this.selector);
    }
    this.splice(0, this.length);
    this.push.apply( this, elems );
    return this;
};

Код не так красив, но он работал для моих фильтрованных селекторов.

Ответ 3

Jquery.selector устарел, лучше запоминать строку с селекторным значением некоторой переменной в тот момент, когда вы назначаете

function someModule($selector, selectorText) {
   var $moduleSelector = $selector;
   var moduleSelectorText = selectorText;

   var onSelectorRefresh = function() {
      $moduleSelector = $(moduleSelectorText);
   }
}

https://api.jquery.com/selector/

Ответ 4

Если вы используете remove(), он удалит только часть DOM, но не всех дочерних или связанных, вместо этого, если вы используете empty() для элемента, проблема исчезла.

например:.

 $('#parent .child).find('#foo').empty();

Может быть, это может быть полезно кому-то!