如何使用jquery复制元素的数据？


How do I copy the data of an element with jQuery?

本问题已经有最佳答案，请猛点这里访问。

我需要将数据值从一个元素复制到另一个元素，但jquery的clone()方法不克隆数据。我也不能重复这些数据：

1
element.data().each

因为data()是函数而不是jquery对象。似乎我必须保留一个单独的属性名列表，并引用这些属性名，但这似乎太老套了。那么我该怎么做呢？

a)迭代数据项或b)clone()一个元素及其数据。

相关讨论

要真正只复制数据-*，这非常简单：

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

这是因为使用.data()没有参数将返回所有数据块的键值对象，反之亦然，您也可以使用键值对象一次更新多个数据块。

更新日期：2017年5月25日

在没有jquery的javascript中，一个聪明的替代方法是：

1
Object.assign(destination.dataset, source.dataset);
相关讨论

回答：

a) Iterate over data items

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

如果元素是dom元素，请使用以下命令：

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

最初作为这个问题的一部分没有得到回答的是，您是否希望数据属性成为DOM的一部分。使用所提供的许多答案将使jquery的data()api可以访问它，但在dom中是不可见的(例如为了使调试更容易)。

一种方法是：

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

注意，字符串化不是显式要求的。我在原始数据标记中嵌入了一些JSON，如果不这样做，我得到的是字符串而不是实际的JSON。

要提供另一种替代方法，即不克隆整个对象，您可以将数据对象复制到包含名称/值对的新数组中，如下所示：

1
2
3
4
5
6
7
8
function getOriginalElementData(domElementJQueryObject){
    var originalElementData = new Array();
    $.each(domElementJQueryObject.data(),function(name,value) {
       originalElementData.push({"name":name,"value":value});
    });

    return originalElementData;
}

要将数据还原到另一个对象，请执行以下操作：

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

要遍历数据项的部分从以下答案复制：jquery loop through data()对象