¿Cómo copio los datos de un elemento con jQuery?

Question

Necesito copiar valores de datos de un elemento a otro, pero el método clone() de jQuery no clona los datos. Y no puedo iterar sobre los datos, ya sea:

element.data().each 

porque data() es una función y no un objeto jQuery. Parece que tengo que mantener una lista separada de los nombres de los atributos y hacer referencia a esos, pero parece demasiado hacky. Entonces, ¿cómo puedo hacer que cualquiera de éstos:

a) iterar sobre los elementos de datos
O
b) clone() un elemento con sus datos.

Answer 1

para dar otra alternativa, es decir, en lugar de la clonación de todo el objeto se puede copiar el objeto de datos a una nueva matriz que contiene pares de nombre/valor followingly:

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

    return originalElementData; 
} 

para restaurar los datos a otro objeto:

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

La parte para iterar a través de los elementos de datos se copia de esta respuesta: jQuery loop through data() object

Answer 2

respuesta a:

a) iterar sobre los elementos de datos

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

Si el elemento es un elemento DOM, utilice esto:

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

Answer 3

Para realmente sólo copiar los datos- *, esto es bastante sencillo:

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

Esto es b Debido a que el uso de .data() ningún argumento devolverá un objeto de valor-clave de todos los datos y viceversa, también puede actualizar datos de varias piezas a la vez utilizando un objeto de valor-clave.

---

ACTUALIZACIÓN ^{25 de mayo de 2017}

aparece una alternativa inteligente en JavaScript jQuery, sin que sea:

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

Answer 4

Algo que no fue respondido originalmente como parte de esta pregunta era si deseaba que los atributos de los datos fueran parte del DOM. El uso de muchas de las respuestas proporcionadas lo hará accesible a la API de datos() de jQuery, pero no estará visible en el DOM (para facilitar la depuración, por ejemplo).

Una manera de hacer esto es:

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

Tenga en cuenta que no se requiere explícitamente la stringify. Tengo algunos JSON incrustados en mis etiquetas de datos originales y, si no hago esto, obtengo '[Object object]' como la cadena en lugar del JSON real.