← Back to jQuery Course | Chapter 11: Utility Methods | Lesson 6 of 6

DOM Nodes पर Metadata Store करना

data method DOM elements पर custom information store करता है। जब किसी element को extra values चाहिए तब यह उपयोगी है।

In this page:

  1. data() क्या है?
  2. Data पढ़ना
  3. कई Values Store करना
  4. Stored Data हटाना
  5. एक छोटा data() Project
Syntax
javascript 
$(selector).data("key", value);
$(selector).data("key");
$(selector).removeData("key");

data() क्या है?

data() method visible HTML attributes में लिखे बिना arbitrary JavaScript values को एक DOM element से attach करता है, उन्हें एक internal जगह पर store करते हुए।

उदाहरण: What is data()?

javascript 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    body { font-family: sans-serif; padding: 12px; }
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    button.secondary, #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    input[type=text] { padding: 6px 8px; margin: 0 6px 8px 0; border: 1px solid #888; border-radius: 4px; font: 14px sans-serif; }
    .stage { border: 2px dashed #888; border-radius: 4px; padding: 10px; margin: 8px 0; min-height: 40px; background: #fafafa; }
    .stage::before { content: attr(data-label); display: block; font-size: 12px; color: #666; margin-bottom: 6px; }
    .item { border: 1px solid #4a7fb5; background: #eaf2fb; padding: 6px 10px; margin: 4px 0; border-radius: 4px; }
    .fresh { background: #ffe066 !important; border-color: #d4a600 !important; }
    .done { text-decoration: line-through; color: #a33; }
    ul.stage { padding-left: 32px; }
    ul.stage:empty::after { content: "(empty)"; color: #999; }
    ul.stage > li { border: 1px solid #4a7fb5; background: #eaf2fb; padding: 6px 10px; margin: 4px 0; border-radius: 4px; }
    .box { border: 2px solid #4a7fb5; background: #f3f8fd; border-radius: 4px; padding: 8px 10px; margin: 8px 0; min-height: 54px; }
    .box .label { display: block; font-weight: bold; margin-bottom: 6px; color: #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; white-space:pre-wrap; }
    #output:empty::before { content: "Output appears here"; color: #888; }
  </style>
</head>
<body>
  <button id="runBtn">Store data</button><button id="resetBtn" class="secondary">Reset</button>
  <div id="card" class="item">Card</div>
  <div id="output"></div>
  <script>
    $("#runBtn").click(function () {
      $("#card").data("userId", 42);
      $("#output").text('$("#card").data("userId") -> ' + $("#card").data("userId"));
    });
    $("#resetBtn").click(function () {
      $("#card").removeData("userId");
      $("#output").text('$("#card").data("userId") -> ' + $("#card").data("userId"));
    });
  </script>
</body>
</html>

Data पढ़ना

stored information वापस पढ़ने के लिए एक key के साथ data() इस्तेमाल करें, और value एक string, number, object, array, या लगभग कोई भी दूसरी JavaScript value हो सकती है।

उदाहरण: Read Data

javascript 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
    #demo :where(p, div, span, li, h1, h2, h3, h4, td, th, blockquote, label, section, article, aside) { border:1px solid #4a7fb5; background:#eaf2fb; padding:6px 10px; margin:4px 0; border-radius:4px; }
    #demo :where(ul, ol) { border:1px dashed #888; background:#fafafa; padding:8px 8px 8px 32px; margin:6px 0; }
    #demo :where(table) { border-collapse:collapse; }
    #demo :where(td, th) { border-radius:0; }
    #demo :where(input, select, textarea) { margin:4px 0; }
  </style>
</head>
<body>
  <button id="runBtn">Run</button>
  <button id="resetBtn">Reset</button>
  <section id="demo">
    <div id="card">Card</div>

  </section>
  <div id="output"></div>
  <script>
    var original = $("#demo").html();

    $("#runBtn").click(function() {
      $("#card").data("userId", 42);
      $("#output").text(String($("#card").data("userId")));
    });

    $("#resetBtn").click(function() {
      $("#demo").html(original);
      $("#output").empty();
    });
  </script>
</body>
</html>

कई Values Store करना

आप अलग-अलग keys के साथ data() call करके एक ही DOM element पर metadata के कई pieces store कर सकते हैं, effectively उस element को अपनी छोटी storage देते हुए।

उदाहरण: Store Multiple Values

javascript 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
    #demo :where(p, div, span, li, h1, h2, h3, h4, td, th, blockquote, label, section, article, aside) { border:1px solid #4a7fb5; background:#eaf2fb; padding:6px 10px; margin:4px 0; border-radius:4px; }
    #demo :where(ul, ol) { border:1px dashed #888; background:#fafafa; padding:8px 8px 8px 32px; margin:6px 0; }
    #demo :where(table) { border-collapse:collapse; }
    #demo :where(td, th) { border-radius:0; }
    #demo :where(input, select, textarea) { margin:4px 0; }
  </style>
</head>
<body>
  <button id="runBtn">Run</button>
  <button id="resetBtn">Reset</button>
  <section id="demo">
    <div id="card">Card</div>

  </section>
  <div id="output"></div>
  <script>
    var original = $("#demo").html();

    $("#runBtn").click(function() {
      $("#card").data("userId", 42);
      $("#card").data("status", "active");
      $("#output").text(JSON.stringify($("#card").data()));
    });

    $("#resetBtn").click(function() {
      $("#demo").html(original);
      $("#output").empty();
    });
  </script>
</body>
</html>

Stored Data हटाना

removeData method किसी element से पहले store किया गया metadata delete कर देता है, जो तब उपयोगी है जब वह information अब relevant न रहे — उदाहरण के लिए, c।

उदाहरण: Remove Stored Data

javascript 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    body { font-family: sans-serif; padding: 12px; }
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    button.secondary, #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    input[type=text] { padding: 6px 8px; margin: 0 6px 8px 0; border: 1px solid #888; border-radius: 4px; font: 14px sans-serif; }
    .stage { border: 2px dashed #888; border-radius: 4px; padding: 10px; margin: 8px 0; min-height: 40px; background: #fafafa; }
    .stage::before { content: attr(data-label); display: block; font-size: 12px; color: #666; margin-bottom: 6px; }
    .item { border: 1px solid #4a7fb5; background: #eaf2fb; padding: 6px 10px; margin: 4px 0; border-radius: 4px; }
    .fresh { background: #ffe066 !important; border-color: #d4a600 !important; }
    .done { text-decoration: line-through; color: #a33; }
    ul.stage { padding-left: 32px; }
    ul.stage:empty::after { content: "(empty)"; color: #999; }
    ul.stage > li { border: 1px solid #4a7fb5; background: #eaf2fb; padding: 6px 10px; margin: 4px 0; border-radius: 4px; }
    .box { border: 2px solid #4a7fb5; background: #f3f8fd; border-radius: 4px; padding: 8px 10px; margin: 8px 0; min-height: 54px; }
    .box .label { display: block; font-weight: bold; margin-bottom: 6px; color: #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; white-space:pre-wrap; }
    #output:empty::before { content: "Output appears here"; color: #888; }
  </style>
</head>
<body>
  <button id="runBtn">Store, then remove data</button><button id="resetBtn" class="secondary">Reset</button>
  <div id="card" class="item">Card</div>
  <div id="output"></div>
  <script>
    $("#runBtn").click(function () {
      $("#output").empty();
      $("#card").data("loading", true);
      $("#output").append($("<div>").text('after data("loading", true):  ' + $("#card").data("loading")));
      $("#card").removeData("loading");
      $("#output").append($("<div>").text('after removeData("loading"):  ' + $("#card").data("loading")));
    });
    $("#resetBtn").click(function () { $("#output").empty(); });
  </script>
</body>
</html>

एक छोटा data() Project

इस तरह hidden metadata attach करना खासतौर पर buttons, product cards, और दूसरे repeated UI elements के लिए उपयोगी है जहाँ हर instance को कुछ याद रखना है।

उदाहरण: Small data() Project

javascript 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
    #demo :where(p, div, span, li, h1, h2, h3, h4, td, th, blockquote, label, section, article, aside) { border:1px solid #4a7fb5; background:#eaf2fb; padding:6px 10px; margin:4px 0; border-radius:4px; }
    #demo :where(ul, ol) { border:1px dashed #888; background:#fafafa; padding:8px 8px 8px 32px; margin:6px 0; }
    #demo :where(table) { border-collapse:collapse; }
    #demo :where(td, th) { border-radius:0; }
    #demo :where(input, select, textarea) { margin:4px 0; }
  </style>
</head>
<body>
  <button id="resetBtn">Reset</button>
  <section id="demo">
    <button class="product" data-id="7">Buy</button>

  </section>
  <div id="output"></div>
  <script>
    var original = $("#demo").html();

    function init() {
      $(".product").on("click", function() {
        $("#output").append($("<div>").text("Product ID: " + $(this).data("id")));
      });
    }
    init();

    $("#resetBtn").click(function() {
      $("#demo").html(original);
      $("#output").empty();
      init();
    });
  </script>
</body>
</html>
Related Topics

Nodes को Filter करना · jQuery Selectors के Native DOM Alternatives · jQuery DOM के Vanilla JS Alternatives · DOM Traversing का परिचय

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
आम गलतियां
  1. यह उम्मीद करना कि .data("id", 5) HTML में data-id attribute बदल देगा, जबकि यह सिर्फ value को memory में store करता है और attribute वही रहता है।
  2. कई elements वाली एक selection पर .data("key") call करना और सारी values की उम्मीद करना, जबकि यह सिर्फ पहले element की value return करता है।
  3. data-user-id को .data("user_id") से पढ़ना, जबकि jQuery hyphenated attributes को camelCase में convert करता है: .data("userId")।
चैप्टर सारांश
  • Type checking utilities यह पहचानती हैं कि आपके पास किस तरह की value है।
  • trim() strings साफ करता है, और array helpers lists के साथ काम करते हैं।
  • extend() objects merge करता है, proxy() context bind करता है, और DOM nodes पर metadata store किया जा सकता है।
🔒

Chapter Quiz — Complete all 6 topics to unlock

0/6 topics done

Complete these topics first:

← Previous Lesson Binding Context with proxy() Next Lesson → Introduction to Deferred Objects

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.