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, Jul 27 '14 at 15:36
Related: http://stackoverflow.com/questions/291841/does-jquery-do-any-kind-of-caching-of-selectors (**the answer is no**) — Mark Silverberg, Jul 27 '14 at 15:37
see http://code.jquery.com/jquery-2.1.1.js it will answer all your questions on jquery — 19greg96, Jul 27 '14 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, Jul 27 '14 at 15:37

score 1 · Answer 1 · answered Jul 27 '14 at 15:41

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 '14 at 15:41

Will

221
3
12

Yes, makes sense.. How do I select from that var, once it's set? – mowgli Jul 27 '14 at 15:46
not sure about what you mean? like this : var that = $('#defaultdata').data("data") – Will Jul 27 '14 at 15:48

charlietfl · Answer 2 · 2014-07-27T15:59:00.617

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 '14 at 15:59

answered Jul 27 '14 at 15:50

charlietfl

170,828
13
121
150

score 1 · Accepted Answer · edited Jul 27 '14 at 16:23

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 '14 at 16:23

mowgli

2,796
3
31
68

answered Jul 27 '14 at 15:54

Chris HG

1,412
16
20

Thank you. I have combined (chained) the someelement.xxx selector calls too. My code is much leaner now ;) – mowgli Jul 27 '14 at 16:20

html jquery data attribute

3 Answers3