Question

我需要将数据值从一个元素复制到另一个元素，但jQuery的clone（）方法不会克隆数据。而且我无法迭代数据：

element.data().each

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

a）迭代数据项
OR
b）clone()一个带有数据的元素。

Answer 1

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

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

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

更新^{2017年5月25日}

没有jQuery的JavaScript中的一个聪明的替代方案似乎是：

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

Answer 2

回答：

a）迭代数据项

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

如果element是DOM元素，请使用：

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

Answer 3

为了给出另一种选择，即不是克隆整个对象，而是可以将数据对象复制到包含名称/值对的新数组中：


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

    return originalElementData;
}

将数据恢复到另一个对象：


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

从此答案中复制了迭代数据项的部分：jQuery loop through data() object

Answer 4

最初未作为此问题的一部分回答的问题是您是否希望数据属性成为DOM的一部分。使用提供的许多答案将使jQuery的data（）API可以访问，但是，在DOM中不可见（例如，为了使调试更容易）。

执行此操作的方法是：

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

请注意，未明确要求stringify。我在原始数据标记中嵌入了一些JSON，如果我不这样做，我会将'[Object object]'作为字符串而不是实际的JSON。

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

4 个答案: