162 votes

Obtenir tous les attributs d'un élément HTML avec Javascript / jQuery

Je veux mettre tous les attributs d'un élément Html dans un tableau: comme j'ai un Objet jQuery, html qui ressemble à ceci:

<span name="test" message="test2"></span>

maintenant une façon est d'utiliser l'analyseur xml décrit ici, mais là j'ai besoin de savoir comment obtenir le code html de mon objet.

l'autre façon est de le faire avec jquery, mais comment? le montant des attributs et les noms génériques.

Merci

Btw: je ne peux pas accéder à l'élément avec le document.getelementbyid ou quelque chose de similaire.

211voto

Roland Bouman Points 15226

Si vous voulez juste les attributs DOM, il est probablement plus simple d'utiliser la liste de nœuds attributes sur l'élément lui-même:

 var el = document.getElementById("someId");
for (var i = 0, atts = el.attributes, n = atts.length, arr = []; i < n; i++){
    arr.push(atts[i].nodeName);
}
 

Notez que cela ne remplit le tableau qu'avec les noms d'attributs. Si vous avez besoin de la valeur de l'attribut, vous pouvez utiliser la propriété nodeValue :

 var nodes=[], values=[];
for (var att, i = 0, atts = el.attributes, n = atts.length; i < n; i++){
    att = atts[i];
    nodes.push(att.nodeName);
    values.push(att.nodeValue);
}
 

69voto

manRo Points 787

Vous pouvez utiliser ce simple plugin comme $ ('# some_id'). GetAttributes ();

 (function($) {
    $.fn.getAttributes = function() {
        var attributes = {}; 

        if( this.length ) {
            $.each( this[0].attributes, function( index, attr ) {
                attributes[ attr.name ] = attr.value;
            } ); 
        }

        return attributes;
    };
})(jQuery);
 

56voto

Aki143S Points 489

Simple:

 var element = $("span[name='test']");
$(element[0].attributes).each(function() {
console.log(this.nodeName+':'+this.nodeValue);});
 

20voto

DUzun Points 355

Parce que dans IE7 elem.attributes répertorie tous les attributs possibles, pas seulement les présents, nous devons tester la valeur de l'attribut. Ce plugin fonctionne dans tous les principaux navigateurs:

 (function($) {
    $.fn.getAttributes = function () {
        var elem = this, 
            attr = {};

        if(elem && elem.length) $.each(elem.get(0).attributes, function(v,n) { 
            n = n.nodeName||n.name;
            v = elem.attr(n); // relay on $.fn.attr, it makes some filtering and checks
            if(v != undefined && v !== false) attr[n] = v
        })

        return attr
    }
})(jQuery);
 

Usage:

 var attribs = $('#some_id').getAttributes();
 

18voto

Eduardo Cuomo Points 1433

Setter et Getter!

 (function($) {
    // Attrs
    $.fn.attrs = function(attrs) {
        var t = $(this);
        if (attrs) {
            // Set attributes
            t.each(function(i, e) {
                var j = $(e);
                for (var attr in attrs) {
                    j.attr(attr, attrs[attr]);
                };
            });
            return t;
        } else {
            // Get attributes
            var a = {},
                r = t.get(0);
            if (r) {
                r = r.attributes;
                for (var i in r) {
                    var p = r[i];
                    if (typeof p.nodeValue !== 'undefined') a[p.nodeName] = p.nodeValue;
                }
            }
            return a;
        }
    };
})(jQuery);
 

Utilisation:

 // Setter
$('#element').attrs({
    'name' : 'newName',
    'id' : 'newId',
    'readonly': true
});

// Getter
var attrs = $('#element').attrs();
 

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X