한 요소의 모든 속성을 복사하여 다른 요소에 적용하는 방법은?

한 요소의 모든 속성을 복사하여 다른 요소에 적용하는 방법은?

한 요소의 속성을 다른 요소에 복사하려면 어떻게 해야 합니까?

HTML

<select id="foo" class="bar baz" style="display:block" width="100" data-foo="bar">...</select>

<div>No attributes yet</div>

자바스크립트

var $div = $('div');
var $select = $('select');

//now copy the attributes from $select to $div

네이티브 속성 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) })
}

그리고 첫번째 코멘트에서 언급했듯이 - 당신은 아마도 source 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);
  }
}

jsfiddle의 작업 솔루션

편집

업데이트된 jsfidder

자바스크립트

$(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/ 에서 확인할 수 있습니다.

도움이 되길 바랍니다.

다음을 시도해 볼 수 있습니다.

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

  return $(to);
};

반환문을 사용하면 다음과 같은 내용을 작성할 수 있습니다.

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

도움이 되길 바랍니다.

질의가 없는 솔루션:

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

이것은 여러분에게 필요하지 않을 수도 있는 방법이나 다른 것들을 복사합니다. 하지만 여러분이 개의치 않기를 바랍니다.이 코드는 작고 간단합니다.

나는 같은 문제에 직면해 있고 많은 시간과 노력을 들인 후에 이 클론 텍스트 영역을 같은 속성의 편집 가능한 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>

Firefox 22 이후 Node.attribute는 더 이상 지원되지 않습니다(다른 브라우저에서 구현되지 않고 사양에서 제거됨).Element(Element.attributes)에서만 지원됩니다.

자바스크립트 솔루션

이전 요소의 속성을 새 요소로 복사

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)

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

언급URL : https://stackoverflow.com/questions/6753362/how-to-copy-all-the-attributes-of-one-element-and-apply-them-to-another