jQuery get multiple attributes

Question

I have an element I need to get an array of specific attributes. For example:

<div id="myDiv" class="myClass" data-country="US" data-city="NY" />

In this example, I need to get all data-* attributes and place them in array (name and value pairs).

In this example, final array would look like this:

myDataArray["data-country"] = "US";
myDataArray["data-city"] = "NY";

Problem is that these attributes are dynamic, I do not know what attributes will be there at the runtime and I cannot hard code filling of array.

Adil · Accepted Answer · 2013-02-03 13:33:13Z

5

You can call data() to get all data attributes.

Live Demo

myDataArray = $('#myDiv').data();
alert(myDataArray["country"]);
alert(myDataArray["city"]);

You can iterate through key value pair like this,

Live Demo

arr = $('#myDiv').data();

for(el in arr)
{
    alert("Key >> " + el);
    alert("Value >> " + arr[el]);
}

edited Feb 3, 2013 at 13:33

answered Feb 3, 2013 at 13:25

Adil

148k25 gold badges217 silver badges207 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Dusan Over a year ago

Is there a selector which would then filter only "data-context-..." attributes or this must be done manually?

Dusan Over a year ago

Problem is that I do not know that elements will be "country" or "city", they are dynamic... So i need to iterate through array and know both name and value of each element...

Adil Over a year ago

Check my updated answer to iterate through collection key, value pair.

Ram · Accepted Answer · 2013-02-03 13:27:25Z

5

var myDataObject = document.getElementById('myDiv').dataset;

http://jsfiddle.net/qQWBB/

answered Feb 3, 2013 at 13:27

Ram

145k16 gold badges174 silver badges201 bronze badges

Comments

Codegiant · Accepted Answer · 2013-02-03 14:12:50Z

1

Try this

var data = $('#myDiv').data();
var myDataArray = [];
$.each(data, function(key, val){
        myDataArray['data-' + key] = val;
});
console.log(myDataArray);

LIVE DEMO

answered Feb 3, 2013 at 14:12

Codegiant

2,1501 gold badge22 silver badges31 bronze badges

1 Comment

Dusan Over a year ago

Yes, this also work for me... basically all answers are good on this subject! Many Thanks!

Collectives™ on Stack Overflow

jQuery get multiple attributes

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related