Récupère tous les attributs d'un élément en utilisant jQuery
J'essaie de passer par un élément et d'obtenir tous les attributs de cet élément pour les sortir, par exemple une balise peut avoir 3 attributs ou plus, inconnus pour moi et j'ai besoin d'obtenir les noms et les valeurs de ces attributs. Je pensais à quelque chose du genre:
$(this).attr().each(function(index, element) {
var name = $(this).name;
var value = $(this).value;
//Do something with name and value...
});
Quelqu'un pourrait-il me dire si cela est même possible, et si oui, quelle serait la syntaxe correcte?
5 réponses
La propriété attributes Les contient toutes:
$(this).each(function() {
$.each(this.attributes, function() {
// this.attributes is not a plain object, but an array
// of attribute nodes, which contain both the name and value
if(this.specified) {
console.log(this.name, this.value);
}
});
});
Ce que vous pouvez également faire est de l'extension .attr, de sorte que vous pouvez l'appeler comme .attr() pour obtenir un objet ordinaire de tous les attributs:
(function(old) {
$.fn.attr = function() {
if(arguments.length === 0) {
if(this.length === 0) {
return null;
}
var obj = {};
$.each(this[0].attributes, function() {
if(this.specified) {
obj[this.name] = this.value;
}
});
return obj;
}
return old.apply(this, arguments);
};
})($.fn.attr);
Utilisation:
var $div = $("<div data-a='1' id='b'>");
$div.attr(); // { "data-a": "1", "id": "b" }
Voici un aperçu des nombreuses façons de faire, pour ma propre référence ainsi que la vôtre :) les fonctions renvoient un hachage de noms d'attributs et de leurs valeurs.
Vanille JS :
function getAttributes ( node ) {
var i,
attributeNodes = node.attributes,
length = attributeNodes.length,
attrs = {};
for ( i = 0; i < length; i++ ) attrs[attributeNodes[i].name] = attributeNodes[i].value;
return attrs;
}
Vanille JS avec Array.réduire
Fonctionne pour les navigateurs supportant ES 5.1 (2011). Nécessite IE9+, ne fonctionne pas dans IE8.
function getAttributes ( node ) {
var attributeNodeArray = Array.prototype.slice.call( node.attributes );
return attributeNodeArray.reduce( function ( attrs, attribute ) {
attrs[attribute.name] = attribute.value;
return attrs;
}, {} );
}
JQuery
Cette fonction attend un objet jQuery, pas un DOM élément.
function getAttributes ( $node ) {
var attrs = {};
$.each( $node[0].attributes, function ( index, attribute ) {
attrs[attribute.name] = attribute.value;
} );
return attrs;
}
Trait de Soulignement
Fonctionne aussi pour lodash.
function getAttributes ( node ) {
return _.reduce( node.attributes, function ( attrs, attribute ) {
attrs[attribute.name] = attribute.value;
return attrs;
}, {} );
}
Lodash
Est encore plus concis que la version Underscore, mais ne fonctionne que pour Lodash, pas pour Underscore. Nécessite IE9+, est bogué dans IE8. Bravo à @AlJey pour celui-là .
function getAttributes ( node ) {
return _.transform( node.attributes, function ( attrs, attribute ) {
attrs[attribute.name] = attribute.value;
}, {} );
}
Page de Test
Dans JS Bin, il y a une page de test live couvrant toutes ces fonctions. Le test inclut des attributs booléens (hidden) et énumérés attributs (contenteditable="").
Avec LoDash, vous pouvez simplement faire ceci:
_.transform(this.attributes, function (result, item) {
item.specified && (result[item.name] = item.value);
}, {});
En utilisant la fonction javascript, il est plus facile d'obtenir tous les attributs d'un élément dans NamedArrayFormat.
$("#myTestDiv").click(function(){
var attrs = document.getElementById("myTestDiv").attributes;
$.each(attrs,function(i,elem){
$("#attrs").html( $("#attrs").html()+"<br><b>"+elem.name+"</b>:<i>"+elem.value+"</i>");
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="myTestDiv" ekind="div" etype="text" name="stack">
click This
</div>
<div id="attrs">Attributes are <div>Un script de débogage (solution jquery basée sur la réponse ci-dessus par hashchange)
function getAttributes ( $node ) {
$.each( $node[0].attributes, function ( index, attribute ) {
console.log(attribute.name+':'+attribute.value);
} );
}
getAttributes($(this)); // find out what attributes are available