Làm cách nào tôi có thể làm mới biến chọn jquery được lưu trữ và chụp nhanh

Question

Tôi đã chạy ngày hôm qua trong một vấn đề với bộ chọn jquery mà tôi gán cho một biến và nó làm tôi phát điên.

Đây là một jsfiddle với testcase:

• giao .elem để var obj tôi
• log cả độ dài ra cửa sổ Console. Kết quả => 4
• Xóa # 3 khỏi DOM
• đăng nhập obj vào bảng điều khiển => số đã xóa # 3 vẫn ở đó và độ dài vẫn là 4. Tôi đã tìm ra truy vấn jquery được chụp nhanh? với biến và không thể? được cập nhật
• log .elem ra cửa sổ Console .. vâng quả => 3 và # 3 đã biến mất
• Bây giờ tôi cập nhật .elem có chiều rộng mới 300
• khai thác gỗ obj & obj.width mang lại cho tôi 300 .. Vì vậy, ảnh chụp đã được cập nhật? Điều thú vị là 3 trong số 4 div có chiều rộng mới, nhưng số 3 div không có ...

Một thử nghiệm khác: Thêm phần tử li vào domtree và đăng nhập obj và .elem. .elem không có li mới và obj không, vì nó vẫn còn ảnh chụp cũ

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

Có không có cách nào để cập nhật này obj với nội dung mới? Tôi không muốn tạo một obj mới, bởi vì trong ứng dụng của tôi có rất nhiều thông tin được lưu trong đối tượng đó, tôi không muốn hủy ...

Answer 1

Vâng, đó là ảnh chụp nhanh. Hơn nữa, việc loại bỏ một phần tử khỏi cây DOM trang không phải là kỳ diệu sẽ biến mất tất cả các tham chiếu đến phần tử.

Bạn có thể làm mới nó như vậy:

var a = $(".elem"); 

a = $(a.selector); 

Mini-plugin:

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

var a = $(".elem"); 

a = a.refresh(); 

giải pháp đơn giản này không hoạt động với traversals phức tạp mặc dù. Bạn sẽ phải tạo một trình phân tích cú pháp cho thuộc tính .selector để làm mới ảnh chụp nhanh cho những người đó.

Cấu trúc của nó như:

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

Trong chỗ mini-plugin:

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

Answer 2

Tôi cũng thích giải pháp @Esailija, nhưng dường như this.selector có một số lỗi với bộ lọc. Vì vậy, tôi sửa đổi để nhu cầu của tôi, có lẽ nó sẽ hữu ích cho người

này là dành cho jQuery 1.7.2 didn`t refresh thử nghiệm trên bức ảnh chụp lọc trên các phiên bản cao hơn

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

Mã là không đẹp lắm, nhưng nó hoạt động cho những bộ chọn lọc của tôi.

Answer 3

Jquery .selector bị phản đối, nó tốt hơn để Hãy nhớ chuỗi có giá trị chọn một số biến tại thời điểm này khi bạn gán

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

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

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

Answer 4

Nếu bạn sử dụng remove() nó sẽ loại bỏ chỉ là một phần của DOM nhưng không phải tất cả các trẻ em hoặc có liên quan, thay vào đó nếu bạn sử dụng empty() trên phần tử, sự cố đã biến mất.

ví dụ .:

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

Có lẽ nó có thể có ích cho một ai đó!