javascript - jquery custom data attribute not working inside div tag -

i using div code

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

and trying print values

 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 put above div tag directly inside body put div tag inside other div tag not work , 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 above html.

please let me know if not clear

when getting data jquery returns data first element matching selector, if 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 div id, , select id $('#someid').data('role')