{"id":7873,"date":"2012-09-21T11:26:08","date_gmt":"2012-09-21T05:56:08","guid":{"rendered":"http:\/\/www.tothenew.com\/blog\/?p=7873"},"modified":"2012-09-21T12:07:10","modified_gmt":"2012-09-21T06:37:10","slug":"jquery-associate-data-with-dom-element","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/jquery-associate-data-with-dom-element\/","title":{"rendered":"jQuery : Associate data with dom element"},"content":{"rendered":"

There are times when we need to associate data with the DOM element say td, li, div etc. I used to sometimes provide attribute ‘rel’ to html tag, then access it using $(‘divId’).attr(‘rel’). This worked when we want to associate only one property, but doesn’t work so well when there are multiple properties to be associated with the same element. And I personally never liked this approach as there was no name given to the type of data attached.<\/p>\n

Recently I found that jQuery provides a method called data()<\/a>, which can be used to associate multiple data with the same element. Lets take a look at the example given below :<\/p>\n

[js]
\n<div id=’studentDetail’ data-age=’24’ data-name=’amit’>
\n……
\n<\/div><\/p>\n

<script type="text\/javascript"><\/p>\n

$(‘#studentDetail’).data(‘age’) \/\/ output : 24
\n $(‘#studentDetail’).data(‘name’) \/\/ output : amit<\/p>\n

$(‘#studentDetail’).data(‘course’, ‘MCA’) \/\/ Associate new data to the element
\n $(‘#studentDetail’).data(‘course’) \/\/ output : MCA<\/p>\n

$(‘#studentDetail’).data(‘course-duration’, ‘3 Years’) \/\/ Associate new data to the element
\n $(‘#studentDetail’).data(‘course-duration’) \/\/ output : 3 Years
\n<\/script><\/p>\n

[\/js]<\/p>\n

Cheers!
\n~~Amit Jain~~
\namit@intelligrape.com<\/p>\n","protected":false},"excerpt":{"rendered":"

There are times when we need to associate data with the DOM element say td, li, div etc. I used to sometimes provide attribute ‘rel’ to html tag, then access it using $(‘divId’).attr(‘rel’). This worked when we want to associate only one property, but doesn’t work so well when there are multiple properties to be […]<\/p>\n","protected":false},"author":7,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":1},"categories":[1],"tags":[997,998,27],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/7873"}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=7873"}],"version-history":[{"count":0,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/7873\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=7873"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=7873"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=7873"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}