Ruft alle Attribute eines Elements mit jQuery ab

Ich versuche, ein Element durchzugehen und alle Attribute dieses Elements zur Ausgabe zu bringen. Beispielsweise kann ein Tag drei oder mehr Attribute haben, die mir unbekannt sind, und ich muss die Namen und Werte dieser Attribute abrufen. Ich dachte etwas in der Art von:

$(this).attr().each(function(index, element) {
    var name = $(this).name;
    var value = $(this).value;
    //Do something with name and value...
});

Kann mir jemand sagen, ob dies überhaupt möglich ist und wenn ja, wie die richtige Syntax lauten würde?

Die attributesEigenschaft enthält sie alle:

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

Was Sie auch tun können, ist zu erweitern, .attrso dass Sie es wie nennen können.attr() ein einfaches Objekt aller Attribute :

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

Verwendung:

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

Hier ist eine Übersicht über die vielen Möglichkeiten, die sowohl für meine als auch für Ihre Referenz verwendet werden können :) Die Funktionen geben einen Hash von Attributnamen und deren Werten zurück.

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 mit Array.reduce

Funktioniert für Browser, die ES 5.1 (2011) unterstützen. Benötigt IE9 +, funktioniert nicht in 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

Diese Funktion erwartet ein jQuery-Objekt, kein DOM-Element.

function getAttributes ( $node ) {
    var attrs = {};
    $.each( $node[0].attributes, function ( index, attribute ) {
        attrs[attribute.name] = attribute.value;
    } );

    return attrs;
}

Unterstreichen

Funktioniert auch für lodash.

function getAttributes ( node ) {
    return _.reduce( node.attributes, function ( attrs, attribute ) {
        attrs[attribute.name] = attribute.value;
        return attrs;
    }, {} );
}

lodash

Ist noch prägnanter als die Underscore-Version, funktioniert aber nur für lodash, nicht für Underscore. Benötigt IE9 +, ist in IE8 fehlerhaft. Ein großes Lob an @AlJey für diesen einen .

function getAttributes ( node ) {
    return _.transform( node.attributes, function ( attrs, attribute ) {
        attrs[attribute.name] = attribute.value;
    }, {} );
}

Testseite

Bei JS Bin gibt es eine Live-Testseite, die alle diese Funktionen abdeckt. Der Test enthält boolesche Attribute ( hidden) und aufgezählte Attribute ( contenteditable="").

Ein Debugging-Skript (jquery-Lösung basierend auf der obigen Antwort von 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

Mit LoDash können Sie dies einfach tun:

_.transform(this.attributes, function (result, item) {
  item.specified && (result[item.name] = item.value);
}, {});

Mit der Javascript-Funktion ist es einfacher, alle Attribute eines Elements in NamedArrayFormat abzurufen.

$("#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>

Einfache Lösung von Underscore.js

Zum Beispiel: Holen Sie sich alle Links Text, dessen Eltern Klasse haben someClass

_.pluck($('.someClass').find('a'), 'text');

Geige arbeiten

Mein Vorschlag:

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