javascript - Hämta alla attribut för ett element med jQuery

Jag försöker gå igenom ett element och hämta alla attribut för det elementet för att skriva ut dem, till exempel kan ett tag ha 3 eller fler attribut, okänt för mig, och jag behöver få namnen och värdena på dessa attribut. Jag tänkte något i stil med:

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

Kan någon säga till mig om detta ens är möjligt, och i så fall vad den korrekta syntaxen skulle vara?

Svar #1

Egenskapen attributes innehåller dem alla:

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

Vad du också kan göra är att utöka .attr så att du kan kalla det som .attr() för att få ett vanligt objekt med alla attribut:

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

Användning :

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

Svar #2

Här är en översikt över de många sätt som det kan göras på, både för min egen referens och för din :) Funktionerna returnerar en hashtabell med attributnamn och deras värden.

Vanilj-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 med Array.reduce

Fungerar för webbläsare som stöder ES 5.1 (2011). Kräver IE9+, fungerar inte i 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

Den här funktionen förväntar sig ett jQuery-objekt, inte ett DOM-element.

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

    return attrs;
}

Understreck

Fungerar även för lodash.

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

lodash

Är ännu mer kortfattad än Underscore-versionen, men fungerar endast för lodash, inte för Underscore. Kräver IE9+, är buggig i IE8. Beröm till @AlJey för den.

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

Test sida

På JS Bin finns en live-test sida som täcker alla dessa funktioner. Testet inkluderar booleska attribut (hidden) och uppräknade attribut (contenteditable="").

Relaterade artiklar