Obtenir tous les attributs d'un élément en utilisant jQuery

J'essaie de parcourir un élément et d'obtenir tous les attributs de cet élément pour les publier, par exemple, une étiquette peut comporter 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 comme suit:

$(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 possible, et si oui, quelle serait la syntaxe correcte?

  • JavaScript: changer la valeur de onclick avec ou sans jQuery
  • JQuery supprimer l'attribut
  • Javascript ne définit que l'attribut pour le dernier élément dans le tableau
  • Obtenez de la valeur d'un attribut personnalisé en utilisant Javascript ou Jquery
  • Obtenir la liste des attributs data- * à l'aide de javascript / jQuery
  • Définir l'attribut sans valeur
  • Supprimer l'objet de la mémoire en javascript
  • Quand fermer la connexion à la base de données MongoDB dans Nodejs
  • Comment analyser une chaîne HTML dans Google Apps Script sans utiliser XmlService?
  • Éléments de tableau de swap Javascript
  • Comment exécuter une tâche Grunt après l'installation de mon générateur Yeoman?
  • Comment afficher l'alerte de confirmation avec trois boutons 'Oui' 'Non' et 'Annuler' tel qu'il apparaît dans MS Word
  • 4 Solutions collect form web for “Obtenir tous les attributs d'un élément en utilisant jQuery”

    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, c'est d'étendre .attr afin que vous puissiez l'appeler comme .attr() pour obtenir un objet simple 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); 

    Usage:

     var $div = $("<div data-a='1' id='b'>"); $div.attr(); // { "data-a": "1", "id": "b" } 

    Voici un aperçu des nombreuses façons possibles, pour ma propre référence ainsi que pour la vôtre 🙂 Les fonctions renvoient un hash de noms d'attributs et 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 s'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 Undercore, mais ne fonctionne que pour lodash, pas pour Underscore. Nécessite IE9 +, est 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

    Chez 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); }, {}); 

    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> 
    JavaScript rend le site Web intelligent, beauté et facile à utiliser.