jQuery / Javascript получает все атрибуты от элемента и передает его другому

Question

У меня есть следующий код:

<div id="elm0" data-color="color" data-size="size" data-more="more">something</div>
<div id="elm1">This element must get elem0 attr</div>

Я знаю, что могу получить $ ("# elm0"). Attr ("color") в var и передать его в $ ("# elm1"), но в моем случае я точно не знаю, какие там атрибуты , Я ищу то, что делает:

получить все атрибуты из $ ("# elm0") и пройти их в $ ("# elm1")

Как я могу это сделать? Thanx

Редактировать: мне нужно получить только атрибуты данных HTML5, например data-color = "color", data-size = "size", а не класс, ID, стиль ...

Answer 1

Вы можете сделать что-то подобное в vanilla JavaScript:

var elm0a = document.getElementById("elm0"​​​​​​​​​​​​).attributes,
    elm1 = document.getElementById("elm1");
for(var i=0; i<elm0a.length; i++) {
    var a = elm0a[i];
    if(a.name.indexOf("data-") == 0)
        elm1.setAttribute(a.name, a.value);
}​

Вы можете попробовать здесь или ... в форме плагина!

jQuery.fn.copyDataAttrTo = function(selector) {
  var a = this[0].attributes, attrMap = {};
  for(var i=0; i<a.length; i++) {
     if(a[i].name.indexOf("data-") == 0) attrMap[a[i].name] = a[i].value;
  }
  $(selector).attr(attrMap);
  return this;
};

Вы бы назвали это так:

$("#elm0").copyDataAttrTo("#elm1");

Вы можете проверить эту версию здесь .

Answer 2

jQuery.fn.getDataMap = function () {
  var map = {};

  if (!this.length) {
    return map;
  }

  var attributes = this[0].attributes;

  for (var i=0;i<attributes.length;i++) {
    var curr = attributes[i];

    if (curr.nodeName.indexOf("data-") === 0) {
      map[curr.nodeName] = curr.nodeValue;
    }
  }

  return map;
}

Затем используйте его следующим образом:

$('#elm1').attr($('#elm0').getDataMap());

http://www.jsfiddle.net/Ag5Dv/

Answer 3

Это должно сделать это. Вы можете легко сделать это без JQuery.

$(function(){
    var src = $('#elm0'),
        dst = $('#elm1'),
        attr = src[0].attributes;

    for(var i = 0, len = attr.length; i < len; i++){
        var current = attr[i];
        dst.attr(current[i].nodeName, current[i].nodeValue);
    }
});​

http://www.jsfiddle.net/pnCdK/