Add some properties to a
element

Question

I want to add some properties to a <div> element. All of the below works except for the .data(). I cannot see it appear in Firefox/Firebug.

$('#menu-container')
  .css('background-image','url("'+big_image+'")')
  .addClass('click_2')                          
  .data("new_link", "new_link.html")
  .css('z-index',"99");

Am I doing it wrong?

When you say you cannot see it, how exactly are you looking for it? You should be looking for it via the jquery API — Allen Rice, Oct 20 '11 at 22:48
Works fine for me in FF 7.0.1 -- http://jsfiddle.net/KEwhf/ -- note: I removed the .css('background-image'...) line so that I didn't have to create that variable. — maxedison, Oct 20 '11 at 22:50

score 8 · Accepted Answer · answered Oct 20 '11 at 22:48

data is not just any ordinary attribute you can add, it is a way to attach objects and data to DOM elements. You can't see it in the HTML source or in Firebug, but you can query it using .data()

The data itself is not stored on the element. It's actually stored in $.cache

score 1 · Answer 2 · answered Oct 20 '11 at 22:49

1

.data() is working but it won't show up as an element's attribute.

If you wanted to see it working you can try console.log($('#menu-container').data('new-link'));

If attributes are what you want then you can do .attr('new-link','new-link.html')

answered Oct 20 '11 at 22:49

Moin Zaman

25,281
6
70
74

score 1 · Answer 3 · answered Oct 20 '11 at 22:51

Use

$('#menu-container').attr('data-new_link','new_link.html');

it will appear in firebug, and you can also use the expected jQuery behavior

$('#menu-container').data('new_link');

to retrieve the value stored..

But there is really no need to do it this way. It gets stored at the .data() collection, regardless of being added as an attribute to the DOM element..

Add some properties to a element

3 Answers3

Add some properties to a
element