tạm thời xóa và sau đó lắp lại thành phần DOM?

Question

Có một số ma thuật jquery mà sẽ cho phép tôi làm như sau:

[0- xác định một số yếu tố trong HTML (ví dụ, một đánh dấu hộp kiểm)]

1- cập nhật phần tử DOM của nó bằng cách thiết lập một các thuộc tính của nó sử dụng .attr() (ví dụ, bằng cách thiết lập của nó "kiểm tra" thuộc tính sử dụng .attr ('kiểm tra', true))

2- tạm thời loại bỏ yếu tố đó từ DOM

3 lắp lại phần tử gốc vào DOM, trong khi vẫn giữ lại tất cả s (nghĩa là, để nó được kiểm tra vì nó đã ở cuối bước 1-- KHÔNG thích nó khi được định nghĩa ban đầu trong HTML)

Lý do tại sao tôi quan tâm đến việc loại bỏ các phần tử này khỏi DOM (chứ không phải hơn là ẩn chúng) là tôi đã nhận thấy rằng nó có vẻ cải thiện hiệu suất một chút. Trang của tôi có ba "trạng thái" khác nhau và chỉ cần một phần ba tổng số phần tử DOM trong bất kỳ trạng thái đã cho nào. [Tôi muốn giữ nó như là một trang duy nhất với các quốc gia khác nhau chứ không phải là phá vỡ nó thành ba trang riêng biệt.]

Cho đến bây giờ tôi đã loại bỏ và reinserting yếu tố vào DOM bằng cách lưu trữ trong một var giá trị của

$("#myElement").html() 

và sau đó xóa nó, nhưng bây giờ tôi nhận thấy rằng khi chèn lại HTML đó vào DOM, các thay đổi được thực hiện [ở bước 1] đã được "hoàn tác".

Có cách nào để thực hiện việc này - để tạm thời xóa nội dung không cần thiết khỏi DOM theo cách bảo toàn tất cả các thuộc tính của nó để cài đặt lại sau này không?

nhờ cho bất kỳ cái nhìn sâu sắc,

lara

Answer 1

Bạn có thể sử dụng clone phương pháp:

var els = $('.els'), saved = els.clone (true); 
els.remove(); 
// .... do other stuff 
saved.appendTo ($('.wherever-you-want-to')); 

Điều đó nói rằng, mặc dù, nó tốt hơn để hiển thị & ẩn chúng (thông qua display: none, ví dụ), hơn là thao tác DOM vì nó rất tốn kém. Nếu bạn phải, sử dụng chèn DOM & xóa (như trên), thay vì .html(), tạo lại một nút từ chuỗi đã cho mỗi lần.

Answer 2

Chỉ cần xóa phần tử khỏi tài liệu và giữ tham chiếu đến nó. Không cần sao chép nó.

var el; 

function removeEl() { 
    el = $("#myElement")[0]; // Get the element itself 
    el.parentNode.removeChild(el); 
} 

function reinsertEl(node) { 
    node.appendChild(el); 
} 

Là một sang một bên kể từ khi bạn đề cập đến nó trong ví dụ của bạn, nó đơn giản hơn nhiều, rõ ràng hơn và nhanh hơn để thiết lập checked tài sản của một hộp kiểm trực tiếp hơn là sử dụng attr(). Không cần phải liên quan đến các thuộc tính chút nào và thực tế là attr()của jQuery thường không phải là. Chỉ cần làm $("#myElement")[0].checked = true;. Nó hoạt động trong tất cả các trình duyệt chính.

Answer 3

Sáu ngày sau khi câu hỏi được trả lời jQuery phát hành 1.4 có chứa phương pháp detach. Mà chính xác những gì bạn đang tìm kiếm.

var detached = $('#element').detach(); 
$('body').append(detached);