jquery custom data attribute not working inside div tag

Question

I am using this div code

<div data-role="page" data-last-value="43" data-hidden="true" data-options='{"name":"John"}'></div>

and trying to print the values like

 japp.init = function () {
  console.log($("div").data("role"));
  console.log($("div").data("lastValue"));
  console.log($("div").data("hidden"));
  console.log($("div").data("options").name);
});

This works fine if I put the above div tag directly inside body but as I put the div tag inside any other div tag it does not work and says undefined.

   <div class="page">
   <div data-role="page" data-last-value="43" data-hidden="true" data- options='{"name":"John"}'></div>
   </div>

console prints undefined for above html.

Please let me know if anything is not clear

By the way, there is a space in you second html, in `data- options='{"name":"John"}'`. i don't know if it has any impact on code, but you can check it ;) — Kamil T, Jul 17 '13 at 14:02

score 3 · Accepted Answer · answered Jul 17 '13 at 14:02

3

When getting data jQuery returns data from the first element matching selector, if the first div in DOM has no data - jquery won't return it.

try

japp.init = function () {
  console.log($("div[data-role]").data("role"));
  console.log($("div[data-lastValue]").data("lastValue"));
  console.log($("div[data-hidden]").data("hidden"));
  console.log($("div[data-options]").data("options").name);
});

or better give this div an id, and select by id like $('#someid').data('role')

answered Jul 17 '13 at 14:02

Artek Wisniewski

797
5
13

Thanks Artek, your solution perfectly working with my requirments. I 'll accept the answer in 5 minutes – Harry Jul 17 '13 at 14:08
@user965884, just know that if you do this and have other elements with those same data attributes, you'll get the value from the first instance found. – Smern Jul 17 '13 at 14:09
yep, if processing multiple divs with these custom attrs use $.each() function, as mentoned by @Kamil T – Artek Wisniewski Jul 17 '13 at 14:10

score 3 · Answer 2 · answered Jul 17 '13 at 14:02

Your selector is div and when you have more divs on your page jQuery will select (in this case) the first one.

 <div class="page">
    <div data-role="page" data-last-value="43" data-hidden="true" data-  options='{"name":"John"}'></div>
 </div>

In the above HTML the first div does not have data-* so it will result with an undefined value

You have to be more specific with your selectors

$('.page div').data('role')

Or

$('div:first div').data('role')

score 2 · Answer 3 · answered Jul 17 '13 at 14:00

2

Try

$("div.page div").each(function(){
    console.log($(this).data("whatever_you_need"));
});

etc.

This way you will cycle through all divs nested in div with class 'page'.

answered Jul 17 '13 at 14:00

Kamil T

2,232
1
19
26

Smern · Answer 4 · 2013-07-17T14:13:47.253

You aren't exactly specifying which div to get. Whenever you are trying to get specific data from a specific element, you should be sure which div you are accessing. This can either occur within an iteration of elements or by ID or an element in relation to an ID. It shouldn't be done based on tagname or even classname as they can be multiple. In this case, why not add an ID on the div you are trying to get so you can access it specifically:

<div class="page">
    <div id="thisDiv" data-role="page" data-last-value="43" data-hidden="true" data-  options='{"name":"John"}'></div>
</div>

Then access:

console.log($("#thisDiv").data("role"));

Also, it is bad for performance to wrap the same jquery object over and over, you can cache it like this:

$thisDiv = $("#thisDiv");
console.log($thisDiv.data("role"));
....

score 1 · Answer 5 · edited Nov 30 '13 at 06:31

give your Div a class like class="myClass"

<div class="page">
    <div class="myClass" data-role="page" data-last-value="43" data-hidden="true" data-  options='{"name":"John"}'></div>
   </div>

and then you can change your jquery selector:

japp.init = function () {
  console.log($(".myClass").data("role"));
  console.log($(".myClass").data("lastValue"));
  console.log($(".myClass").data("hidden"));
  console.log($(".myClass").data("options").name);
});

otherwise jquery don't know which div you are looking for. I hope this will help

score 1 · Answer 6 · answered Jul 17 '13 at 14:05

I believe it is because $("div") returns all occurrences of div and then selects the first to perform a function on. I'm not sure how you want to use this functionality but it might be worth considering something like this JSFiddle where a class is used to select the correct div

 $(function(){
   console.log($(".div").data("role"));
   console.log($(".div").data("lastValue"));
   console.log($(".div").data("hidden"));
   console.log($(".div").data("options").name);
  });

jquery custom data attribute not working inside div tag

6 Answers6