A convenient way to see data added to an element via jQuery .data()

Question

I am adding an id to an element via call to jQuery.data:

$layout.nextAll('.imagepicker').data('imgPickerId', randomnumber);

So my element of a class imagepicker will have [imgPickerId=randomnumbervalue] data attribute added to it.

It seems like there is a problem how I later on look for .imagepicker with exactly this imgPickerId. Where can I lookup which attributes are added to a particular element in a convenient way (excep from js code)? Maybe in firebug somewhere?

P.S. for some reason my "getter code" works in jQuery 1.6 but does not in 1.7. Still I am suspecting data isn't being added to an element and need a way to check it.

mgibsonbr · Accepted Answer · 2012-03-20T16:18:09.860

3

jQuery's data function stores everything in JavaScript, without altering the DOM in any way. I'm afraid you'll have to use code to access it.

A quick Google search also showed me a FireQuery plugin for Firebug, which seems to enable you to see the attached data of your elements. Haven't tried it myself, though, so I can't confirm that.

Update: Tested it, and it works fine! With FireQuery all data of your elements are visible right next to the HTML:

screenshot of FireQuery showing data attributes

edited Mar 20 '12 at 16:18

answered Mar 20 '12 at 16:04

mgibsonbr

21,755
7
70
112

+1: for the cool plugin, didn't knew it before and it helpes me out ! – mas-designs Mar 20 '12 at 16:38

score 3 · Answer 2 · answered Mar 20 '12 at 16:07

3

Have you considered in writing your data in an custom attribute like data-imgPickerID="someID"?
For sure this does not allow you to save huge data but you could inspect it via firebug and since you are only saving an ID it would fit for your needs.
Which is also very cool about the .data() method is you can retrieve your custom attribute from above like so .data("imgPickerID");

answered Mar 20 '12 at 16:07

mas-designs

7,498
1
31
56

**+1** Note that `data-*` attributes are HTML5 feature. (Though they work in almost every modern browser...) – gdoron Mar 20 '12 at 16:13
Yeah but the are getting ignored by browsers which do not support HTML5 as far as I know ? – mas-designs Mar 20 '12 at 16:15
In almost all of them. I think it can make problems in old Opera. Basically you're right, it's being ignored. – gdoron Mar 20 '12 at 16:16
okay, didn't knew that so far, have you seen any problems which come with that ? – mas-designs Mar 20 '12 at 16:18
1

Nope, only rumors... It doesn't really bother me, I think we should all do the same. =) – gdoron Mar 20 '12 at 17:06

score 1 · Answer 3 · edited May 23 '17 at 11:48

1

data() will save data in memory (of course linked to the elements in your selector), it doesn't write things on the element, so you can't look at that in firebug.

You can pre-populate elements with some data by using the html5 data attibute though

Look at this question for an expanded explanation

How does jQuery store data with .data()?

edited May 23 '17 at 11:48

Community

1
1

answered Mar 20 '12 at 16:03

Nicola Peluchetti

76,206
31
145
192

A convenient way to see data added to an element via jQuery .data()

3 Answers3