Set an HTML5 data array using jQuery vars

Question

I've been struggling with this for awhile now and can't seem to find the correct syntax.

If I have these variables declared in JS:

var width = 300,
    height = 200,
    time = 100;

And some html:

<div class="target">Target</div>

How can I use jQuery to set those vars as an html5 data array onto the target div like so:

<div class="target" data-stuff='["300","200","100"]'>Target</div>

The below answer is fine, but I'd recommend doing data-width, data-height, data-time... it's less parsing for when you want to work with the data. — Chris Dixon
– Chris Dixon, Commented Jan 27, 2014 at 15:14

S. A. · Accepted Answer · 2014-01-27 15:27:28Z

1

How about:

a = $(".target").data("stuff");

var width = a[0],
    height = a[1],
    time = a[2];

Update

If you want to set the variables in the html data attribute, just:

$(".target").data("stuff", [width, height, time]);

edited Jan 27, 2014 at 15:27

answered Jan 27, 2014 at 15:13

S. A.

3,7542 gold badges23 silver badges33 bronze badges

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

3 Comments

kthornbloom Over a year ago

I'm testing in a jsFiddle, and it doesn't seem to work. Am I doing something incorrectly here? jsfiddle.net/9rcws

Joeytje50 Over a year ago

Sergio, I think you misunderstood the question. The question is how to set the data-stuff attribute, not how to set a var with the data-stuff attribute's values.

Joeytje50 Over a year ago

@SergioAristizábal You typoed there, there are now 2 commas after the width.

Joeytje50 · Accepted Answer · 2014-01-27 15:23:11Z

0

To insert data-attributes into your HTML content, you'd need to use the .attr() method:

$('.target').attr('data-stuff', '['+[width, height, time].toString()+']');

To just set the data to the element, without needing to actually set an attribute in the HTML, use .data():

$('.target').data('stuff', [width, height, time]);

and to retrieve the value of either of those two, use:

$('.target').data('stuff')

This will return the array [300, 200, 100] in both cases. A demo of this script can be seen here. Just open your console (In Chrome: ctrl+shift+J, in Internet Explorer: F12 and then Ctrl+2) and you'll see 2 arrays at the bottom there.

edited Jan 27, 2014 at 15:23

answered Jan 27, 2014 at 15:17

Joeytje50

19.2k15 gold badges69 silver badges99 bronze badges

Comments

Matt Burland · Accepted Answer · 2014-01-27 15:17:59Z

0

Try this:

var width = 300,
height = 200,
time = 100;

$(".target").data("myarray", [width, height, time]);

console.log($(".target").data("myarray"));

See fiddle

answered Jan 27, 2014 at 15:17

Matt Burland

45.3k18 gold badges110 silver badges182 bronze badges

Collectives™ on Stack Overflow

Set an HTML5 data array using jQuery vars

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related