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.

Answer 1

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]);
}