Làm cách nào để sao chép dữ liệu của một phần tử bằng jQuery?

Question

Tôi cần sao chép các giá trị dữ liệu từ một phần tử này sang phần tử khác, nhưng phương thức clone() của jQuery không sao chép dữ liệu. Và tôi không thể lặp qua dữ liệu:

element.data().each 

vì data() là một hàm chứ không phải đối tượng jQuery. Có vẻ như tôi phải giữ một danh sách riêng biệt của các tên thuộc tính và tham khảo những tên đó nhưng điều đó có vẻ quá hacky. Vậy làm thế nào tôi có thể làm một trong những:

a) lặp qua các mục dữ liệu
HOẶC
b) clone() một phần tử với dữ liệu của nó.

Answer 1

Để cung cấp thay thế khác, ví dụ thay vì nhân bản toàn bộ đối tượng, bạn có thể sao chép các đối tượng dữ liệu vào một mảng mới có chứa các cặp tên/giá trị Followingly:

function getOriginalElementData(domElementJQueryObject){ 
    var originalElementData = new Array(); 
    $.each(domElementJQueryObject.data(),function(name,value) { 
     originalElementData.push({"name":name,"value":value}); 
    }); 

    return originalElementData; 
} 

Để khôi phục dữ liệu đến một đối tượng khác:

function restoreOriginalElementData(domElementJQueryObject,originalElementData){ 
    for(var i=0;i<originalElementData.length;i++){ 
     domElementJQueryObject.data(originalElementData[i].name,originalElementData[i].value); 
    } 
} 

phần để lặp qua các mục dữ liệu được sao chép từ câu trả lời này: jQuery loop through data() object

Answer 2

trả lời đến:

a) lặp qua các mục dữ liệu

$.each(element.data(), function (name, value) { 
    // ... do something 
}) 

Nếu phần tử là một phần tử DOM, sử dụng này:

$.each($.data(element), function (name, value) { 
    // ... do something 
}) 

Answer 3

Để thực sự chỉ sao chép các đĩa dữ liệu *, đây là khá đơn giản:

$(destination).data($(source).data()); 

Đây là b ecause sử dụng .data() không có đối số nào sẽ trả về đối tượng khóa-giá trị của tất cả các phần dữ liệu và ngược lại bạn cũng có thể cập nhật nhiều phần dữ liệu cùng một lúc bằng cách sử dụng đối tượng khóa-giá trị.

---

CẬP NHẬT ^{25th May 2017}

Một lựa chọn thông minh trong JavaScript mà không jQuery dường như là:

Object.assign(destination.dataset, source.dataset); 

Answer 4

Cái gì đó đã không được ban đầu được trả lời như là một phần của câu hỏi này liệu bạn có muốn thuộc tính dữ liệu là một phần của DOM hay không. Sử dụng nhiều câu trả lời được cung cấp sẽ làm cho nó có thể truy cập được vào API dữ liệu của jQuery(), nhưng, sẽ không được hiển thị trong DOM (ví dụ như để gỡ lỗi dễ dàng hơn).

Một cách để làm điều này là:

$.each(original.data(), function (name, value) { 
    new.attr('data-' + name, JSON.stringify(value)); 
}); 

Lưu ý rằng stringify không cần một cách rõ ràng. Tôi có một số JSON được nhúng vào các thẻ dữ liệu gốc của tôi và, nếu tôi không làm điều này, tôi nhận được '[Object object]' như là chuỗi thay vì JSON thực tế.