Question

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

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

Answer 1

您可以使用原生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"));

Answer 2

A working solution on 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。

Answer 3

非常简单

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

Answer 4

我们还可以尝试扩展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/

希望这有帮助。

Answer 5

非jquery解决方案：

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

它会复制您可能不需要的方法和其他内容，但希望您不要介意。这段代码小而简单。

Answer 6

我正面临着同样的问题，在投入了大量的时间和精力之后，我创建了这个clone textarea into editable div with same attribute

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

Answer 7

一个非常直截了当的解决方案是这样的：

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>

Answer 8

自Firefox 22以来，不再支持Node.attributes（未由其他浏览器实现并从规范中删除）。它仅在Element（Element.attributes）上受支持。

Answer 9

你可以试试这个：

componentWillMount

return语句允许您编写如下内容：

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

  return $(to);
};

希望这有帮助。

Answer 10

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) })
}

Answer 11

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)

Answer 12

$("div").addClass($('#foo').attr('class'));

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

12 个答案: