J'essaie de passer en revue 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 de 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 c'est même possible et, dans l'affirmative, quelle serait la syntaxe correcte?
La propriété attributes
les contient tous:
$(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 d’étendre .attr
pour pouvoir l’appeler comme .attr()
pour obtenir un objet brut avec 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);
Usage:
var $div = $("<div data-a='1' id='b'>");
$div.attr(); // { "data-a": "1", "id": "b" }
Voici un aperçu des nombreuses manières possibles, aussi bien pour vous que pour votre référence :) Les fonctions renvoient un hachage de noms d'attributs et de leurs valeurs.
Vanilla 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;
}
Vanilla JS avec Array.reduce
Fonctionne pour les navigateurs prenant en charge 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 élément DOM.
function getAttributes ( $node ) {
var attrs = {};
$.each( $node[0].attributes, function ( index, attribute ) {
attrs[attribute.name] = attribute.value;
} );
return attrs;
}
Souligner
Fonctionne également 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 +, c'est un buggy dans IE8. Félicitations à @AlJey pour celui-là .
function getAttributes ( node ) {
return _.transform( node.attributes, function ( attrs, attribute ) {
attrs[attribute.name] = attribute.value;
}, {} );
}
Page de test
Sur JS Bin, il existe une page de test en direct couvrant toutes ces fonctions. Le test comprend des attributs booléens (hidden
) et des attributs énumérés (contenteditable=""
).
avec LoDash, vous pouvez simplement faire ceci:
_.transform(this.attributes, function (result, item) {
item.specified && (result[item.name] = item.value);
}, {});
Solution simple de Underscore.js
Par exemple: Obtenez tous les textes de liens dont les parents ont la classe someClass
_.pluck($('.someClass').find('a'), 'text');
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
Ma suggestion:
$.fn.attrs = function (fnc) {
var obj = {};
$.each(this[0].attributes, function() {
if(this.name == 'value') return; // Avoid someone (optional)
if(this.specified) obj[this.name] = this.value;
});
return obj;
}
var a = $ (el) .attrs ();
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>