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>

我知道我可以在var中获得$（“＃elm0”）。attr（“color”）并将其传递给$（“＃elm1”）但在我的情况下我不确切知道那里有什么属性。我正在寻找能够做到的事情：

从$（“＃elm0”）获取所有attr并传递他们到$（“＃elm1”）

我该怎么做？感谢名单

编辑：我只需要获取HTML5数据属性，例如data-color =“color”，data-size =“size”而不是class，ID，style ......

Answer 1

这应该这样做。你可以在没有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/

Answer 2

你可以在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);
}

You can give it a try here，或者......以插件形式！

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");

You can test that version here

Answer 3

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/

jQuery / Javascript从元素获取所有属性并将其传递给另一个元素

3 个答案: