如何使用 jQuery 复制元素的数据？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/177867/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I copy the data of an element with jQuery?
提问by MDCore
I need to copy data values from one element to another, but jQuery's clone() method doesn't clone the data. And I can't iterate over the data either:
我需要将数据值从一个元素复制到另一个元素，但 jQuery 的 clone() 方法不会克隆数据。而且我也无法遍历数据：
element.data().each
because data()is a function and not a jQuery object. It seems I have to keep a separate list of attribute names and reference those but that seems too hacky. So how can I do either of these:
因为data()是一个函数而不是一个 jQuery 对象。似乎我必须保留一个单独的属性名称列表并引用它们，但这似乎太hacky了。那么我该怎么做：
a) Iterate over data items
OR
b) clone()an element with its data.
a) 迭代数据项
或
b)clone()一个元素及其数据。
回答by Nexii Malthus
To really only copy the data-*, this is quite straightforward:
要真正只复制数据-*，这非常简单：
$(destination).data( $(source).data() );
This is because using .data() no arguments will return a key-value object of all pieces of data and vice versa you can also update multiple pieces data at once using a key-value object.
这是因为使用 .data() 没有参数将返回所有数据的键值对象，反之亦然，您也可以使用键值对象一次更新多个数据。
UPDATE 25th May 2017
2017 年 5 月 25 日更新
A clever alternative in JavaScript without jQuery appears to be:
在没有 jQuery 的 JavaScript 中，一个聪明的替代方案似乎是：
Object.assign(destination.dataset, source.dataset);
回答by DUzun
Answer to:
回答：
a) Iterate over data items
a) 迭代数据项
$.each(element.data(), function (name, value) {
// ... do something
})
If element is a DOM element, use this:
如果 element 是 DOM 元素，请使用：
$.each($.data(element), function (name, value) {
// ... do something
})
回答by simon
To give another alternative, i.e. instead of cloning the whole object you can copy the data object to a new array containing name/value pairs followingly:
提供另一种选择，即您可以将数据对象复制到包含名称/值对的新数组，而不是克隆整个对象，如下所示：
function getOriginalElementData(domElementJQueryObject){
var originalElementData = new Array();
$.each(domElementJQueryObject.data(),function(name,value) {
originalElementData.push({"name":name,"value":value});
});
return originalElementData;
}
To restore the data to another object:
要将数据恢复到另一个对象：
function restoreOriginalElementData(domElementJQueryObject,originalElementData){
for(var i=0;i<originalElementData.length;i++){
domElementJQueryObject.data(originalElementData[i].name,originalElementData[i].value);
}
}
The part to iterate through the data items is copied from this answer: jQuery loop through data() object
遍历数据项的部分是从这个答案复制的：jQuery loop through data() object
回答by JasCav
Something that wasn't originally answered as a part of this question was whether or not you wanted the data attributes to be part of the DOM. Using many of the answers provided will make it accessible to jQuery's data() API, but, won't be visible in the DOM (to make things like debugging easier, for example).
这个问题最初没有回答的问题是您是否希望数据属性成为 DOM 的一部分。使用提供的许多答案将使 jQuery 的 data() API 可以访问它，但是在 DOM 中将不可见（例如，使调试之类的事情更容易）。
A way to do this is:
一种方法是：
$.each(original.data(), function (name, value) {
new.attr('data-' + name, JSON.stringify(value));
});
Note that the stringify is not explicitly required. I have some JSON embedded into my original data tags and, if I don't do this, I get '[Object object]' as the string instead of the actual JSON.
请注意， stringify 不是明确要求的。我有一些 JSON 嵌入到我的原始数据标签中，如果我不这样做，我会得到 '[Object object]' 作为字符串而不是实际的 JSON。
