Ruft alle Attribute eines Elements mit jQuery ab

127

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?

Styphon
quelle

Antworten:

246

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" }
pimvdb
quelle
1
Möglicherweise möchten Sie das Problem beheben, wenn keine übereinstimmenden Elemente vorhanden sind, z. B.$().attr()
Alexander,
11
Die attributesSammlung enthält alle möglichen Attribute im älteren IE, nicht nur diejenigen, die im HTML angegeben wurden. Sie können dies umgehen, indem Sie die Attributliste mithilfe der einzelnen Attributeigenschaften filtern specified.
Tim Down
7
Dies ist eine sehr gute und erwartete Funktionalität für die jQuery- .attr()Methode. Es ist seltsam, dass jQuery es nicht enthält.
ivkremer
nur ein bisschen neugierig zu wissen, warum wir als Array in darauf zugreifen this[0].attributes?
Vishal
attributesist allerdings kein Array ... in Chrome ist es zumindest ein NamedNodeMap, was ein Objekt ist.
Samuel Edwin Ward
26

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="").

Hashwechsel
quelle
3

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
zzapper
quelle
2

Mit LoDash können Sie dies einfach tun:

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

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>

Vishnu Prasanth G.
quelle
0

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

Pymen
quelle
0

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

Wilhelm
quelle