如何复制一个元素的所有属性并将它们应用到另一个元素？

如何将一个元素的属性复制到另一个元素？

超文本标示语言

<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
58590 次浏览
小开 
$("div").addClass($('#foo').attr('class'));
小开
最佳答案

可以使用本机 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"));
小开

一个关于 jsfiddle 的工作解决方案

编辑

更新 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。

小开

自 Firefox 22以来，Node.properties 不再受支持(其他浏览器不支持并从规范中删除)。它只在 Element (Element.properties)上受支持。

小开

我们还可以尝试扩展 jQuery 原型($.fn)对象，以提供一个可以链接到 jQuery ()函数的新方法。

下面是@pilvdb 解决方案的一个扩展，它提供了一个复制所有属性的函数

用法是这样的:

 $(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/上有一个示例

希望这个能帮上忙。

小开

一个非 jquery 的解决方案:

function copy(element){
var clone = document.createElement(element.nodeName);
for(key in element){
clone.setAttribute(key,element[key]);
}
return clone;
}

它复制方法和其他你可能不需要的东西，但希望你不介意。这个代码很小很简单。

小开

很简单

function cloneAttributes(element, sourceNode) {
let attr;
let attributes = Array.prototype.slice.call(sourceNode.attributes);
while(attr = attributes.pop()) {
element.setAttribute(attr.nodeName, attr.nodeValue);
}
}
小开

你可以试试这个:

function copyAttributes(from, to)
{
$($(from)[0].attributes).
each(function(){$(to).attr(this.nodeName, this.nodeValue);});


return $(to);
};

Return 语句允许您编写以下内容:

copyAttributes(some_element, $('<div></div>')).append(...) ...

希望这个能帮上忙。

小开

ES6语法一行程序:

function cloneAttributes(target, source) {
[...source.attributes].forEach( attr => { target.setAttribute(attr.nodeName ,attr.nodeValue) })
}

正如第一条注释中指出的那样——您可能不想复制 source id 属性... ... 所以这条注释将把它保存为“ data-id”属性，以备您需要引用时使用。

function cloneAttributes(target, source) {
[...source.attributes].forEach( attr => { target.setAttribute(attr.nodeName === "id" ? 'data-id' : attr.nodeName ,attr.nodeValue) })
}
小开

Javascript 解决方案

将旧元素的属性复制到新元素

const $oldElem = document.querySelector('.old')
const $newElem = document.createElement('div')


Array.from($oldElem.attributes).map(a => {
$newElem.setAttribute(a.name, a.value)
})

如果需要，用新元素替换旧元素

$oldElem.parentNode.replaceChild($newElem, $oldElem)
小开

我正面临着同样的问题，在投入了大量的时间和精力后，我创建了这个 将 texttarea 克隆到具有相同属性的可编辑 div 中

select.getAttributeNames().forEach(attrName => {
$(div).attr(attrName, inputData.getAttribute(attrName));
});
小开

一个非常直接的解决方案是这样的:

const _$ = domQuery => document.querySelector(domQuery)
let div1 = _$('#div-1')
let div2 = _$('#div-2')


for(attr of div1.attributes) {
div2.setAttribute(attr.name, attr.value);
}
.my-div {
height: 100px;
width: 100px;
}
<h1>div-1</h1>
<div atribute-test="test" class="my-div" style="background: red" id="div-1"></div>
<h1>div-2</h1>
<div id="div-2"></div>


提交答案