Comment copier tous les attributs d'un élément et les appliquer à un autre ?

Question

Comment copier les attributs d'un élément vers un autre élément ?

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

Vous pouvez utiliser la fonction native Node#attributes propriété : 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

Une solution fonctionnelle sur jsfiddle

EDIT

Mise à jour de 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>

C'est une copie #bdiv attributs à #adiv .

Answer 3

Nous pouvons également essayer d'étendre le prototype jQuery ( $.fn ) pour fournir une nouvelle méthode qui peut être enchaînée à la fonction jQuery().

Voici une extension de la solution de @pimvdb pour fournir une fonction qui copie tous les attributs

L'utilisation serait la suivante :

 $(destinationElement).copyAllAttributes(sourceElement);

La fonction d'extension peut être définie comme suit :

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

Un exemple est disponible à l'adresse suivante http://jsfiddle.net/roeburg/Z8x8x/

J'espère que cela vous aidera.

Answer 4

Depuis Firefox 22, Node.attributes n'est plus pris en charge (non implémenté par les autres navigateurs et retiré de la spécification). Il n'est pris en charge que par Element (Element.attributes).

Answer 5

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