javascript - 如何刷新存储和快照的 jquery 选择器变量

Question

我昨天遇到了一个问题，我分配给了一个变量的 jquery-selector 把我逼疯了。

这是一个带有测试用例的 jsfiddle:

• 将 .elem 分配给我的对象变量
• 将两个长度记录到控制台。结果 => 4
• 从 DOM 中删除 #3
• 将 obj 记录到控制台 => 删除的 #3 仍然存在，长度仍然是 4。 我发现 jquery 查询是快照的？到变量，不能？不会？得到更新
• 将 .elem 记录到控制台.. 是的结果 => 3 并且 #3 消失了
• 现在我用 300 的新宽度更新 .elem
• 记录 obj 和 obj.width 给我 300.. 那么快照已经更新了吗？有趣的是，4 个 div 中的 3 个具有新的宽度，但删除的 #3 没有...

另一个测试:将 li 元素添加到 domtree 并记录 obj 和 .elem。 .elem 确实有新的 li 而 obj 没有，因为它仍然是旧快照

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

有没有办法用新内容更新这个对象？ 我不想创建一个新的对象，因为在我的应用程序中，那个对象中保存了很多信息，我不想破坏...

Answer 1

是的，这是一个快照。此外，从页面 DOM 树中删除一个元素并不会神奇地消失对该元素的所有引用。

你可以像这样刷新它:

var a = $(".elem");

a = $(a.selector);

迷你插件:

$.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