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

Question

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:

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:

a) Iterate over data items
OR
b) clone() an element with its data.

Answer 1

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.

---

UPDATE ^{25th May 2017}

A clever alternative in JavaScript without jQuery appears to be:

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

Answer 2

Answer to:

a) Iterate over data items

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

If element is a DOM element, use this:

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