html jquery data attribute

Question

I have made a div solely for holding default data/text so I can retrieve it with jquery, and avoid re-stating text messages etc. in jquery too. It works, and lets me have ONE place to edit text, but maybe its too messy, I'm not sure..

Like so (html):

<div id="defaultdata" data-data='{"yestext":"Yes please, thank you!", "yesclass":"yesstyle", "notext":"No thank you..", "noclass":"nostyle"}'></div>

Then in jquery I have:

if (someclass == 'yes') {

someelement.text($('#defaultdata').data("data").yestext);
someelement.removeClass($('#defaultdata').data("data").noclass);
someelement.addClass($('#defaultdata').data("data").yesclass);

} else {

someelement.text($('#defaultdata').data("data").notext);
someelement.removeClass($('#defaultdata').data("data").yesclass);
someelement.addClass($('#defaultdata').data("data").noclass);

}

My question is.. wouldn't it be better to retrieve the data("data") element once (as json maybe?) and then refer to that instead of having so many data("data").xxxx requests?

I mean.. Doesn't jquery scan, select and parse it each time I refer to data("data"), or is it already set in an array/object once used?

Right.. so why don't you set a variable to $('#defaultdata').data("data") so you don't have to keep having jQuery spend cycles on re-finding and interpreting the data? — Mark Silverberg
– Mark Silverberg, Commented Jul 27, 2014 at 15:36
Related: stackoverflow.com/questions/291841/… (the answer is no) — Mark Silverberg
– Mark Silverberg, Commented Jul 27, 2014 at 15:37
see code.jquery.com/jquery-2.1.1.js it will answer all your questions on jquery — 19greg96
– 19greg96, Commented Jul 27, 2014 at 15:37
@Skram yes thats what im thinking of now (writing the issue helps clear the mind some ;)). But how would I do that? Just var somevar = $('#defaultdata').data("data"), and then how do I retrieve from that? — mowgli
– mowgli, Commented Jul 27, 2014 at 15:37

mowgli · Accepted Answer · 2014-07-27 16:23:25Z

1

Combining charlietfl and Will's points, you could so something like this:

var someelement = $("#someelement");
var defaultData = $('#defaultdata').data('data');

if (someclass == 'yes') {
    someelement.text(defaultData.yestext).removeClass(defaultData.noclass).addClass(defaultData.yesclass);

} else {
    someelement.text(defaultData.notext).removeClass(defaultData.yesclass).addClass(defaultData.noclass);

}

Here's a jsfiddle: http://jsfiddle.net/tkSyd/1/

edited Jul 27, 2014 at 16:23

mowgli

2,8594 gold badges34 silver badges69 bronze badges

answered Jul 27, 2014 at 15:54

Chris HG

1,49216 silver badges21 bronze badges

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

1 Comment

mowgli Over a year ago

Thank you. I have combined (chained) the someelement.xxx selector calls too. My code is much leaner now ;)

Will · Accepted Answer · 2014-07-27 15:41:43Z

1

In jquery, if you don't refer it to a variable, then it will run through whole DOM to find your selector every time. So in your case, $('#defaultdata').data("data") will run many times, which definitely will reduce the efficiency, so I recommend you to refer it to the variable.

answered Jul 27, 2014 at 15:41

Will

2113 silver badges12 bronze badges

2 Comments

mowgli Over a year ago

Yes, makes sense.. How do I select from that var, once it's set?

Will Over a year ago

not sure about what you mean? like this : var that = $('#defaultdata').data("data")

charlietfl · Accepted Answer · 2014-07-27 15:59:00Z

1

You can retrieve the whole data object once simply using :

 var data = $('#defaultdata').data();

then you can access various properties using:

var yestext= data.data.yestext

edited Jul 27, 2014 at 15:59

answered Jul 27, 2014 at 15:50

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Collectives™ on Stack Overflow

html jquery data attribute

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related