« Back to Core

[edit]

data( name )

Returns value at named data store for the element, as set by data(name, value).

If the jQuery collection references multiple elements, the value returned refers to the first element.

This function is used to get stored data on an element without the risk of a circular reference. It uses jQuery.data and is new to version 1.2.3. It can be used for many reasons and jQuery UI uses it heavily.

Arguments:
nameString
Name of the data stored.
Examples:

Get the data named "blah" stored at for an element.

    $("button").click(function(e) {
      var value;

      switch ($("button").index(this)) {
        case 0 :
          value = $("div").data("blah");
          break;
        case 1 :
          $("div").data("blah", "hello");
          value = "Stored!";
          break;
        case 2 :
          $("div").data("blah", 86);
          value = "Stored!";
          break;
        case 3 :
          $("div").removeData("blah");
          value = "Removed!";
          break;
      }

      $("span").text("" + value);
    });



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  
  <script>
  $(document).ready(function(){
    
    $("button").click(function(e) {
      var value;

      switch ($("button").index(this)) {
        case 0 :
          value = $("div").data("blah");
          break;
        case 1 :
          $("div").data("blah", "hello");
          value = "Stored!";
          break;
        case 2 :
          $("div").data("blah", 86);
          value = "Stored!";
          break;
        case 3 :
          $("div").removeData("blah");
          value = "Removed!";
          break;
      }

      $("span").text("" + value);
    });

  });
  </script>
  <style>
  div { margin:5px; background:yellow; }
  button { margin:5px; font-size:14px; }
  p { margin:5px; color:blue; }
  span { color:red; }
  </style>
</head>
<body>
  <div>A div</div>
  <button>Get "blah" from the div</button>
  <button>Set "blah" to "hello"</button>
  <button>Set "blah" to 86</button>
  <button>Remove "blah" from the div</button>
  <p>The "blah" value of this div is <span>?</span></p>
</body>
</html>

NameType
[edit]

data( name, value )

Stores the value in the named spot.

If the jQuery collection references multiple elements, the data element is set on all of them. A data value that is a Javascript object is not copied and will be shared across all elements in the collection.

This function can be useful for attaching data to elements without having to create a new expando. It also isn't limited to a string. The value can be any format.

It may also be used for getting events attached to elements, however this is unsupported. First paramater being the element, second being the string "events"

Arguments:
nameString
Name of the data to store.
valueAny
Value to be stored.
Examples:

Store then retrieve a value from the div element.

    $("div").data("test", { first: 16, last: "pizza!" });
    $("span:first").text($("div").data("test").first);
    $("span:last").text($("div").data("test").last);



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  
  <script>
  $(document).ready(function(){
    
    $("div").data("test", { first: 16, last: "pizza!" });
    $("span:first").text($("div").data("test").first);
    $("span:last").text($("div").data("test").last);

  });
  </script>
  <style>
  div { color:blue; }
  span { color:red; }
  </style>
</head>
<body>
  <div>
    The values stored were 
    <span></span>
    and
    <span></span>
  </div>
</body>
</html>

NameType