Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Iterating over element attributes with jQuery

I know individual attributes can be retrieved with the attr() method, but I'm trying to iterate over all of the attributes for an element. For context, I'm using jQuery on some 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> 

I am already able to iterate over the items with...

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

But I'd like to be able to get an array of attributes for each 'item' so I can then iterate over those...

e.g.

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

I've done some searching here, in the jQuery documentation, and elsewhere via Google but have had no luck. If nothing else, I may just be having trouble excluding results relating to the attr() method of the jQuery object. Thanks in advance.

like image 641
theraccoonbear Avatar asked Feb 08 '10 21:02

theraccoonbear


People also ask

How do you iterate in jQuery?

. each() is used directly on a jQuery collection. It iterates over each matched element in the collection and performs a callback on that object. The index of the current element within the collection is passed as an argument to the callback.

How do I iterate through a div in jQuery?

jQuery Selector can be used to find (select) HTML elements from the DOM. Once an element is selected, the jQuery children() method is called to find all the child elements of the selected element.

What is .each in jQuery?

The each() method in jQuery specifies a function that runs for every matched element. It is one of the widely used traversing methods in JQuery. Using this method, we can iterate over the DOM elements of the jQuery object and can execute a function for every matched element.

What is $() in jQuery?

$() = window. jQuery() $()/jQuery() is a selector function that selects DOM elements. Most of the time you will need to start with $() function. It is advisable to use jQuery after DOM is loaded fully.


2 Answers

The best way is to use the node object directly by using its attributes property. The only difference in my solution below compared to others suggesting this method is that i would use .each again instead of a traditional js loop:

$(xml).find('item').each(function() {   $.each(this.attributes, function(i, attrib){      var name = attrib.name;      var value = attrib.value;      // do your magic :-)   }); }); 
like image 161
prodigitalson Avatar answered Sep 19 '22 20:09

prodigitalson


it seems you have to use plain old vanilla javascript:

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?

like image 33
Juraj Blahunka Avatar answered Sep 18 '22 20:09

Juraj Blahunka