Iterieren über Elementattribute mit jQuery

Question

Ich weiß, einzelne Attribute können mit der attr() Methode abgerufen werden, aber ich versuche, über alle der Attribute für ein Element zu iterieren. Für Kontext verwende ich jQuery auf einige XML ...

<items> 
    <item id="id123" name="Fizz" value="Buzz" type="xyz"> 
    <subitem name="foo"> 
    <subitem name="bar"> 
    </item> 
    <item id="id456" name="Bizz" value="Bazz" type="abc"> 
    <subitem name="meh"> 
    <subitem name="hem"> 
    </item> 
</items> 

Ich bin bereits in der Lage über die Elemente iterieren mit ...

$(xml).find('item').each(function() { 
    // Do something to each item here... 
}); 

Aber ich möchte in der Lage sein bekomme ein Array von Attributen für jedes 'Element', so dass ich dann iterieren kann über diese ...

zB

$(xml).find('item').each(function() { 
    var attributes = $(this).attributes(); // returns an array of attributes? 
    for (attribute in attributes) { 
    // Do something with each attribute... 
    } 
}); 

Ich habe einige Suche hier in der jQuery-Dokumentation und anderswo über Google gemacht, aber hatten kein Glück. Wenn nichts anderes, kann ich nur Probleme haben, Ergebnisse in Bezug auf die attr()-Methode des jQuery-Objekts auszuschließen. Danke im Voraus.

Answer 1

Der beste Weg ist, das Knotenobjekt direkt zu verwenden, indem Sie seine attributes Eigenschaft verwenden. Der einzige Unterschied in meiner Lösung unter anderem im Vergleich zu dieser Methode darauf hindeutet, ist, dass ich .each wieder anstelle einer herkömmlichen js Schleife verwenden würde:

$(xml).find('item').each(function() { 
    $.each(this.attributes, function(i, attrib){ 
    var name = attrib.name; 
    var value = attrib.value; 
    // do your magic :-) 
    }); 
}); 

Answer 2

es scheint, dass Sie das gute alte Vanille Javascript verwenden haben:

for (var i = 0; i < elem.attributes.length; i++) { 
    var attrib = elem.attributes[i]; 
    if (attrib.specified == true) { 
     console.log(attrib.name + " = " + attrib.value); 
    } 
} 

How to iterate through all attributes in an HTML element?

Answer 3

Wie wäre es?

Answer 4

Können Sie das DOM-Element aus dem jQuery-Wrapper mithilfe der Funktion get() abrufen und dann die DOM-Attribute iterieren?

var node = $(myStuff).get(0); 
if (node.attributes.length) { 

    for (var length = attrs.length, i = 0; i < length; i++) { 
     if (attrs[i].specified) { 

     } 
    } 
} 

Für einige viel robuster DOM-Attribut Handhabung check this blog post.

Answer 5

Während Sie das Standard-DOM-Element attributes Attribut verwenden können, nur wird es umfasst alle Attribut (auch die nicht explizit festgelegt) in IE6. Als Alternative können Sie die Anzahl der Attribute beschränken Sie Folgendes einstellen:

var use_attributes = ['id','name','value','type']; 
$(xml).find('item').each(function() { 
    var $item = $(this); 

    $.each(use_attributes, function(){ 
    if($item.attr(this)){ 
     // Act on the attribute here. 
     // `this` = attribute name 
     // $item.attr(this) = attribute value 
    } 
    }) 
}); 

Answer 6

Ich veröffentliche hier, weil ich denke, kann es anderen helfen, die zu diesem Beitrag kommen suchen, um eine XML-Datei zu analysieren, wie ich war.

Ich war auf der Suche nach einer Methode zum Durchlaufen einer XML-Datei mit einer sehr ähnlichen Struktur zu Theracoonbear's Fle und Speichern der Ergebnisse in einem Array und stieß auf diesen Beitrag.

ich prodigitalson den Code aussehen, aber ich konnte einfach nicht diese Syntax zu arbeiten - mit firefox, dass in der Leitung beschweren:

$.each(this.attributes, function(i, attrib){ 

dass

dies.Attribute

ist keine definierte Funktion. Ich bin mir ziemlich sicher, dass der Fehler ganz meiner ist. Aber ich habe mehrere Stunden damit verbracht, den Versuch, diese Funktion zu erhalten und habe es versäumt,

Was für mich gearbeitet wurde (wo mein Tag-Namen-Sitzung statt Artikel ist): -

$(xml_Data).find("session").each(function() { 
    console.log("found session"); 
    $(this).children().each(function(){ 
    console.log("found child " + this.tagName); 
    console.log("attributes" + $(this).text()); 
    }); 
}); 

Ich schätze, dass dies nicht genau Beantworte die ursprüngliche Frage. Jedoch hoffe ich, dass es andere Besucher zu diesem Beitrag einige Zeit speichern kann.

Grüße

Answer 7

function findByAll(toLookFor, lookInText) { 
    return $('*').filter(function() { 
     return Array.prototype.some.call(this.attributes, function(attr) { 
      return attr.value.indexOf(toLookFor) >= 0; 
     }) || (lookInText && $(this).text().indexOf(toLookFor) >= 0); 
    }); 
}