如何将一个元素的属性复制到另一个元素？
HTML
<select id="foo" class="bar baz" style="display:block" width="100" data-foo="bar">...</select>
<div>No attributes yet</div>
JavaScript
var $div = $('div');
var $select = $('select');
//now copy the attributes from $select to $div
您可以使用本机Node#attributes属性：http : //jsfiddle.net/SDWHN/16/。
var $select = $("select");
var $div = $("div");
var attributes = $select.prop("attributes");
// loop through <select> attributes and apply them on <div>
$.each(attributes, function() {
$div.attr(this.name, this.value);
});
alert($div.data("foo"));
ES6 语法一行：
function cloneAttributes(target, source) {
[...source.attributes].forEach( attr => { target.setAttribute(attr.nodeName ,attr.nodeValue) })
}
正如第一条评论中所指出的-您可能不想复制源 id 属性……因此，如果您需要参考，此属性会将其保存为“data-id”属性。
function cloneAttributes(target, source) {
[...source.attributes].forEach( attr => { target.setAttribute(attr.nodeName === "id" ? 'data-id' : attr.nodeName ,attr.nodeValue) })
}
很简单
function cloneAttributes(element, sourceNode) {
let attr;
let attributes = Array.prototype.slice.call(sourceNode.attributes);
while(attr = attributes.pop()) {
element.setAttribute(attr.nodeName, attr.nodeValue);
}
}
编辑
更新了 jsfiddler
Javascript
$(function(){
var destination = $('#adiv').eq(0);
var source = $('#bdiv')[0];
for (i = 0; i < source.attributes.length; i++)
{
var a = source.attributes[i];
destination.attr(a.name, a.value);
}
});
HTML
<div id="adiv" class="aclass">A class</div>
<div id="bdiv" class="bclass">B class</div>
这就是将#bdiv属性复制到 #adiv.
我们还可以尝试扩展 jQuery 原型 ( $.fn) 对象，以提供可以链接到 jQuery() 函数的新方法。
这是@pimvdb 解决方案的扩展，提供了一个复制所有属性的函数
用法如下：
$(destinationElement).copyAllAttributes(sourceElement);
扩展函数可以这样定义：
(function ($) {
// Define the function here
$.fn.copyAllAttributes = function(sourceElement) {
// 'that' contains a pointer to the destination element
var that = this;
// Place holder for all attributes
var allAttributes = ($(sourceElement) && $(sourceElement).length > 0) ?
$(sourceElement).prop("attributes") : null;
// Iterate through attributes and add
if (allAttributes && $(that) && $(that).length == 1) {
$.each(allAttributes, function() {
// Ensure that class names are not copied but rather added
if (this.name == "class") {
$(that).addClass(this.value);
} else {
that.attr(this.name, this.value);
}
});
}
return that;
};
})(jQuery);
http://jsfiddle.net/roeburg/Z8x8x/提供了一个示例
希望这可以帮助。