Как скопировать данные элемента с помощью jQuery?

Мне нужно скопировать значения данных из одного элемента в другой, но метод jQuery clone() не клонирует данные. И я не могу перебирать данные:

element.data().each

потому что data() - это функция, а не объект jQuery. Кажется, мне нужно сохранить отдельный список имен атрибутов и ссылаться на них, но это кажется слишком взломанным. Итак, как я могу это сделать:

a) Итерировать элементы данных
ИЛИ
b) clone() элемент с его данными.

Ответы

Ответ 1

Чтобы действительно копировать только данные *, это довольно просто:

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

Это связано с тем, что использование .data() no arguments будет возвращать объект значений ключа для всех частей данных, и наоборот, вы также можете обновлять сразу несколько данных с помощью объекта значения ключа.

ОБНОВЛЕНИЕ ^{25 мая 2017 г.}

Умная альтернатива в JavaScript без jQuery выглядит следующим образом:

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

Ответ 2

Ответа на этот вопрос:

a) Итерация по элементам данных

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

Если элемент является элементом DOM, используйте это:

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

Ответ 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 через объект data()

Ответ 4

Что-то, на что первоначально не ответили как часть этого вопроса, было то, хотите ли вы, чтобы атрибуты данных были частью DOM. Используя многие из предоставленных ответов, он будет доступен для jQuery data() API, но не будет отображаться в DOM (например, сделать такие вещи, как отладка).

Способ сделать это:

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

Обратите внимание, что stringify явно не требуется. У меня есть JSON, встроенный в мои исходные теги данных, и если я этого не сделаю, я получаю "Объект объекта" как строку вместо фактического JSON.