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

admin管理员组

文章数量:1345006

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

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

• javascript
• jquery
• jquery-selectors
• jquery-data

Share Improve this question Follow edited Nov 20, 2013 at 17:40 Smern 19.1k2222 gold badges7777 silver badges9393 bronze badges asked Jul 17, 2013 at 13:58 HarryHarry 4,7731717 gold badges7777 silver badges101101 bronze badges 1

• 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 Commented Jul 17, 2013 at 14:02

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 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')

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')

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'.

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"));
....

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);
  });

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

本文标签： javascriptjquery custom data attribute not working inside div tagStack Overflow