कुछ HTML टैग्स के लिए मनमाना डेटा कैसे स्टोर करें

Question

मैं एक पेज बना रहा हूं जिसमें जावास्क्रिप्ट द्वारा प्रदान की गई कुछ बातचीत है। उदाहरण के रूप में: लिंक जो लेखों की सामग्री प्राप्त करने के लिए AJAX अनुरोध भेजते हैं और फिर उस डेटा को एक div में प्रदर्शित करते हैं। स्पष्ट रूप से इस उदाहरण में, मुझे अतिरिक्त जानकारी को संग्रहीत करने के लिए प्रत्येक लिंक की आवश्यकता है: लेख की आईडी। जिस तरह से मैं मामले में इसे संभाल रहा हूं वह उस जानकारी को href लिंक में डालना था:

<a class="article" href="#5">

मैं a.article तत्वों को खोजने और उचित ईवेंट हैंडलर को संलग्न करने के लिए jQuery का उपयोग करता हूं। (यहाँ प्रयोज्य या शब्दार्थ पर मत लटकाओ, यह सिर्फ एक उदाहरण है)

वैसे भी, यह विधि काम करती है, लेकिन इसमें थोड़ी सी बदबू आती है, और यह बिल्कुल भी एक्स्टेंसिबल नहीं है (क्या होता है अगर क्लिक फ़ंक्शन में एक से अधिक पैरामीटर हैं? क्या होगा यदि उन मापदंडों में से कुछ वैकल्पिक हैं?)

तुरंत स्पष्ट उत्तर तत्व पर विशेषताओं का उपयोग करना था। मेरा मतलब है, यह वही है जिसके लिए वे सही हैं? (एक प्रकार का)।

<a articleid="5" href="link/for/non-js-users.html">

में मेरी हाल ही में सवाल मैं पूछने पर कि क्या इस विधि मान्य था, और यह मेरे अपने DTD को परिभाषित (मैं नहीं), तो नहीं, यह वैध या विश्वसनीय नहीं है की है कि कम पता चला है। एक सामान्य प्रतिक्रिया डेटा को classविशेषता में डालने के लिए थी (हालांकि यह मेरे खराब चुने गए उदाहरण के कारण हो सकता है), लेकिन मेरे लिए, यह और भी अधिक बदबू आ रही है। हां यह तकनीकी रूप से मान्य है, लेकिन यह एक महान समाधान नहीं है।

एक अन्य विधि जिसका मैंने अतीत में उपयोग किया था, वह वास्तव में कुछ JS उत्पन्न करना था और इसे एक <script>टैग में पृष्ठ में सम्मिलित करना था , जिससे एक ऐसी संरचना का निर्माण होगा जो वस्तु के साथ जुड़ेगी।

var myData = {
    link0 : {
        articleId : 5,
        target : '#showMessage'
        // etc...
    },
    link1 : {
        articleId : 13
    }
};

<a href="..." id="link0">

लेकिन यह बनाए रखने के लिए बट में एक वास्तविक दर्द हो सकता है और आम तौर पर सिर्फ बहुत गड़बड़ है।

तो, इस सवाल पर जाने के लिए, आप HTML टैग के लिए जानकारी के मनमाने टुकड़े कैसे संग्रहीत करते हैं ?

Comments

संबंधित सवाल: stackoverflow.com/questions/209428/…

— तमस Czinege

Answer 1

आप HTML के किस संस्करण का उपयोग कर रहे हैं?

एचटीएमएल 5 में, डेटा के साथ उपसर्ग किए गए कस्टम विशेषताओं को पूरी तरह से मान्य है- जैसे

<div data-internalid="1337"></div>

XHTML में, यह वास्तव में मान्य नहीं है। यदि आप XHTML 1.1 मोड में हैं, तो ब्राउज़र शायद इसके बारे में शिकायत करेगा, लेकिन 1.0 मोड में, अधिकांश ब्राउज़र बस चुपचाप इसे अनदेखा कर देंगे।

अगर मैं तुम होते तो मैं स्क्रिप्ट आधारित दृष्टिकोण का पालन करता। आप इसे सर्वर की ओर से स्वचालित रूप से उत्पन्न कर सकते हैं ताकि इसे बनाए रखने के लिए पीठ में दर्द न हो।

Comments

@Tchalvak: सच है, लेकिन यह बिट सबसे ब्राउज़रों पर काम करेगा, कोई भी कम नहीं।

— तमस Czinege

दूसरों ने दावा किया है कि समर्थन पर प्रतीक्षा करने का कोई कारण नहीं है, क्योंकि एकमात्र समस्या यह कारण मान्य करने में विफल है, और यह IE को नहीं तोड़ता है। टीजे क्रॉलर का जवाब यहां देखें: stackoverflow.com/questions/1923278/…

— क्रिस

यदि आप डेटा-xxx विशेषताओं का उपयोग करते हैं और आप उन्हें पुनर्प्राप्त करना चाहते हैं, तो आप बस किसी भी तृतीय-पक्ष ढांचे के बिना "domElement.getAttribute ('डेटा-जो भी हो)" का उपयोग कर सकते हैं।

— ओहद क्राविक

ध्यान रखें प्रदर्शन! jsperf.com/jquery-data-vs-jqueryselection-data/19

— FilmJ

अनुस्मारक: डेटा को पुनः प्राप्त करने के लिए, 1337, jquery के माध्यम से, चर नाम से 'डेटा' निकालना सुनिश्चित करें। उदाहरण के लिए, उपयोग करें: $(this).data('internalid'); इसके बजाय:$(this).data('data-internalid');

— गिदोन रोज़ेंटल

Answer 2

यदि आप पहले से ही jQuery का उपयोग कर रहे हैं, तो आपको "डेटा" विधि का लाभ उठाना चाहिए जो jQuery के साथ एक डोम तत्व पर मनमाना डेटा संग्रहीत करने के लिए अनुशंसित विधि है।

कुछ स्टोर करने के लिए:

$('#myElId').data('nameYourData', { foo: 'bar' });

डेटा पुनर्प्राप्त करने के लिए:

var myData = $('#myElId').data('nameYourData');

यही सब कुछ है, लेकिन अधिक जानकारी / उदाहरण के लिए jQuery प्रलेखन पर एक नज़र डालें ।

Answer 3

दूसरे तरीके से, मैं व्यक्तिगत रूप से इसका उपयोग नहीं करूंगा लेकिन यह काम करता है (आश्वस्त रहें कि आपका JSON वैध है क्योंकि eval () खतरनाक है)।

<a class="article" href="link/for/non-js-users.html">
    <span style="display: none;">{"id": 1, "title":"Something"}</span>
    Text of Link
</a>

// javascript
var article = document.getElementsByClassName("article")[0];
var data = eval(article.childNodes[0].innerHTML);

Comments

पार्श्व सोच के लिए +1। मैं सहमत हूं कि मैं शायद इस पद्धति का उपयोग नहीं करना चाहता, लेकिन यह एक बहुत ही व्यवहार्य विकल्प है!

— निकफ

@nickf आप jsfiddle.net/EAXmY के बजाय इसके evalइस्तेमाल से छुटकारा पा सकते हैंJSON.parse

— सिमोन

Answer 4

मनमाना विशेषताएँ मान्य नहीं हैं, लेकिन आधुनिक ब्राउज़रों में पूरी तरह से विश्वसनीय हैं। यदि आप जावास्क्रिप्ट के माध्यम से गुण सेट कर रहे हैं, तो आपको सत्यापन के बारे में भी चिंता करने की आवश्यकता नहीं है।

एक विकल्प जावास्क्रिप्ट में विशेषताओं को सेट करना है। jQuery के पास उस उद्देश्य के लिए एक अच्छी उपयोगिता विधि है , या आप अपना स्वयं का रोल कर सकते हैं।

Comments

data-इसके बजाय विशेषताओं का उपयोग क्यों नहीं करते ?

— फ्लिम

Answer 5

एक हैक जो हर संभव ब्राउज़र के साथ काम करने जा रहा है वह इस तरह से खुली कक्षाओं का उपयोग करना है: <a class='data\_articleid\_5' href="link/for/non-js-users.html>;

यह सब शुद्धतावादियों के लिए सुरुचिपूर्ण नहीं है, लेकिन यह सार्वभौमिक रूप से समर्थित, मानक-अनुपालन, और हेरफेर करने में बहुत आसान है। यह वास्तव में सबसे अच्छा संभव तरीका लगता है। आप तो serialize, संशोधित , कॉपी अपने टैग, या कोई अन्य कुछ भी, dataहोगा रहने संलग्न कॉपी आदि

एकमात्र समस्या यह है कि आप इस तरह से गैर-सीरियल करने योग्य वस्तुओं को संग्रहीत नहीं कर सकते हैं , और यदि आप वास्तव में बहुत बड़ा कुछ डालते हैं तो सीमाएं हो सकती हैं।

दूसरा तरीका नकली विशेषताओं का उपयोग करना है :<a articleid='5' href="link/for/non-js-users.html">

यह अधिक सुरुचिपूर्ण है, लेकिन मानक को तोड़ता है, और मैं समर्थन के बारे में 100% निश्चित नहीं हूं। कई ब्राउज़र इसे पूरी तरह से समर्थन करते हैं, मुझे लगता है कि IE6 JSइसके लिए उपयोग का समर्थन करता है लेकिन ऐसा नहीं है CSS selectors(जो वास्तव में यहां कोई फर्क नहीं पड़ता), शायद कुछ ब्राउज़र पूरी तरह से भ्रमित होंगे, आपको इसकी जांच करने की आवश्यकता है।

सीरियल करना और डीसर्विसलाइज़ करना जैसी मज़ेदार बातें करना और भी खतरनाक होगा।

जब आप अपने टैग को कॉपी करने का प्रयास करते हैं, तब idsशुद्ध JSहैश का उपयोग करना ज्यादातर काम करता है। यदि आपके पास है tag <a href="..." id="link0">, तो इसे मानक JSविधियों के माध्यम से कॉपी करें , और फिर dataकेवल एक प्रति से जुड़ी संशोधित करने का प्रयास करें , दूसरी प्रति संशोधित की जाएगी।

यदि आप tagएस कॉपी नहीं करते हैं , या केवल पढ़ने के लिए डेटा का उपयोग करते हैं तो यह कोई समस्या नहीं है । यदि आप कॉपी tagकरते हैं और वे संशोधित हो गए हैं तो आपको मैन्युअल रूप से संभालना होगा।

Comments

क्लास पर भंडारण करना लाजवाब है

— सरवनन राजारमन

Answer 6

Jquery का उपयोग करना,

स्टोर करने के लिए: $('#element_id').data('extra_tag', 'extra_info');

वापस पाने के लिए: $('#element_id').data('extra_tag');

Answer 7

मुझे पता है कि आप वर्तमान में jQuery का उपयोग कर रहे हैं, लेकिन क्या होगा यदि आपने ऑनक्लिक हैंडलर इनलाइन को परिभाषित किया है। तब आप कर सकते हैं:

 <a href='/link/for/non-js-users.htm' onclick='loadContent(5);return false;'>
     Article 5</a>

Answer 8

आप छिपे हुए इनपुट टैग का उपयोग कर सकते हैं। मुझे इसके साथ w3.org पर कोई सत्यापन त्रुटि नहीं मिलती है:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang='en' xml:lang='en' xmlns='http://www.w3.org/1999/xhtml'>
  <head>
    <meta content="text/html;charset=UTF-8" http-equiv="content-type" />
    <title>Hello</title>
  </head>
  <body>
    <div>
      <a class="article" href="link/for/non-js-users.html">
        <input style="display: none" name="articleid" type="hidden" value="5" />
      </a>
    </div>
  </body>
</html>

JQuery के साथ आपको आर्टिकल आईडी कुछ इस तरह मिलेगा (टेस्ट नहीं किया गया):

$('.article input[name=articleid]').val();

लेकिन मैं HTML5 की सलाह दूंगा यदि यह एक विकल्प है।

Comments

मुझे नहीं लगता कि style="display: none"छिपे हुए इनपुट क्षेत्रों के लिए आवश्यक है।

— फिलाई

अच्छा दृष्टिकोण, सभी HTML संस्करणों में पूरी तरह से मान्य है। मैं इस धारणा के साथ कोडन को हतोत्साहित करता हूं कि आपके सभी उपयोगकर्ताओं के पास HTML5- शिकायत ब्राउज़र होगा। और प्रदर्शन: छिपे हुए फ़ील्ड के लिए किसी की भी आवश्यकता नहीं है।

— andreszs

बहुत अच्छा। यह सबसे अच्छा समाधान है जो मैंने XHTML के लिए पाया है जहाँ डेटा-विशेषताएँ एक वैध विकल्प नहीं हैं। IMO यह अनपेक्षित तरीकों से टैग / विशेषताओं का दुरुपयोग नहीं करता है, इसमें लगभग कोई "गंध" नहीं है। और जैसा कि दूसरों ने कहा: प्रदर्शन: कोई भी वास्तव में जरूरत नहीं है।

— अरहमान

Answer 9

मनमाना डेटा जोड़ने के बजाय पहले से ही सार्थक डेटा का उपयोग क्यों नहीं किया जाता है?

यानी उपयोग करें <a href="https://stackoverflow.com/articles/5/page-title" class="article-link">, और फिर आप प्रोग्राम को पेज पर (क्लासनाम के माध्यम से) और लेख आईडी ( /articles\/(\d+)/खिलाफ रेगेक्स मिलान) के सभी लेख लिंक प्राप्त कर सकते हैं this.href।

Comments

इसके साथ समस्या यह है कि यह वास्तव में एक्स्टेंसिबल भी नहीं है

— ehdv

Answer 10

एक jQuery उपयोगकर्ता के रूप में मैं मेटाडेटा प्लगइन का उपयोग करेगा । HTML साफ दिखता है, यह मान्य है, और आप कुछ भी एम्बेड कर सकते हैं जिसे JSON नोटेशन का उपयोग करके वर्णित किया जा सकता है।

Answer 11

इसलिए ऐसा करने के लिए चार विकल्प होने चाहिए:

1. डेटा को आईडी विशेषता में रखें।
2. डेटा को मनमानी विशेषता में रखें
3. डेटा को कक्षा की विशेषता में रखें
4. अपना डेटा दूसरे टैग में रखें

http://www.shanison.com/?p=321

Comments

@ h4ck3rm1k3 ... आईडी विशेषता में नहीं है क्योंकि यह दस्तावेज़ को विशिष्ट रूप से पूर्ण होना चाहिए, और इसे साइडबार में आवश्यक होने पर दोहराया जाना चाहिए, या कुछ और ... यह एक पुराना प्रश्न है, लेकिन यह अभी भी मान्य है

— Miguel-svj

Answer 12

मैं "rel" विशेषता के उपयोग की वकालत करता हूं। XHTML मान्य करता है, विशेषता का उपयोग शायद ही कभी किया जाता है, और डेटा कुशलता से पुनर्प्राप्त किया जाता है।

Comments

खिचड़ी भाषा है कि आईडी लिंक पर nofollow विशेषता को तोड़ने

— कार्टर कोल

Answer 13

यह अच्छी सलाह है। @Prestaul को धन्यवाद

यदि आप पहले से ही jQuery का उपयोग कर रहे हैं, तो आपको "डेटा" विधि का लाभ उठाना चाहिए जो कि jQuery के साथ एक डोम तत्व पर मनमाना डेटा संग्रहीत करने के लिए अनुशंसित विधि है।

बहुत सही है, लेकिन क्या होगा अगर आप सादे पुराने HTML में मनमाना डेटा स्टोर करना चाहते हैं? यहाँ अभी तक एक और विकल्प है ...

<input type="hidden" name="whatever" value="foobar"/>

एक छिपे हुए इनपुट तत्व के नाम और मूल्य विशेषताओं में अपना डेटा डालें। यह उपयोगी हो सकता है यदि सर्वर HTML (यानी एक PHP स्क्रिप्ट या जो कुछ भी) उत्पन्न कर रहा है, और आपका जावास्क्रिप्ट कोड बाद में इस जानकारी का उपयोग करने जा रहा है।

बेशक, सबसे साफ नहीं है, लेकिन यह एक विकल्प है। यह सभी ब्राउज़रों के साथ संगत है और XHTML मान्य है। आपको कस्टम विशेषताओं का उपयोग नहीं करना चाहिए , न ही वास्तव में 'डेटा-' उपसर्ग के साथ विशेषताओं का उपयोग करना चाहिए, क्योंकि यह सभी ब्राउज़रों पर काम नहीं कर सकता है। और, इसके अलावा, आपका दस्तावेज़ W3C सत्यापन पास नहीं करेगा।

Comments

निश्चित रूप से निश्चित नहीं है, लेकिन कुछ ब्राउज़र शिकायत कर सकते हैं यदि आप "सख्त" सिद्धांत के साथ कस्टम विशेषताओं का उपयोग करते हैं। किसी भी तरह से, यह मान्य नहीं है XHTML।

— बीएमएनआर

Answer 14

आप एक यादृच्छिक तत्व ( <span data-randomname="Data goes here..."></span>) की अपनी स्वयं की बनाई गई विशेषता के डेटा- उपसर्ग का उपयोग कर सकते हैं , लेकिन यह केवल HTML5 में मान्य है। इस प्रकार ब्राउज़र वैधता के बारे में शिकायत कर सकते हैं।

आप एक <span style="display: none;">Data goes here...</span>टैग का उपयोग भी कर सकते हैं । लेकिन इस तरह से आप विशेषता कार्यों का उपयोग नहीं कर सकते हैं, और अगर सीएसएस और जेएस को बंद कर दिया जाता है, तो यह वास्तव में एक स्वच्छ समाधान भी नहीं है।

लेकिन जो मैं व्यक्तिगत रूप से पसंद करता हूं वह निम्नलिखित है:

<input type="hidden" title="Your key..." value="Your value..." />

सभी मामलों में इनपुट छिपाया जाएगा, विशेषताएँ पूरी तरह से मान्य हैं, और यह नहीं भेजा जाएगा यदि यह एक <form>टैग के भीतर है , क्योंकि इसे कोई नाम नहीं मिला है, है ना? इन सबसे ऊपर, विशेषताओं को याद रखना वास्तव में आसान है और कोड अच्छा और समझने में आसान लगता है। आप इसमें एक आईडी-विशेषता भी डाल सकते हैं, जिससे आप इसे जावास्क्रिप्ट के साथ भी आसानी से एक्सेस कर सकते हैं और कुंजी-वैल्यू पेयर को एक्सेस कर सकते हैं input.title; input.value।

Comments

मुझे यकीन है कि आपने html तालिकाओं और चयन के साथ काम नहीं किया था। आप कुछ काम को बचाने के लिए डेटा- विशेषता का अधिक बार उपयोग करेंगे।

मैं वास्तव में 'डेटा-' विशेषता का उपयोग करता हूं। लेकिन यह इस बात पर निर्भर करता है कि आपकी आवश्यकताएं क्या हैं। उदाहरण के लिए, <इनपुट /> के साथ आपके पास कोई भी कुंजी हो सकती है, जबकि 'डेटा-' के लिए यह बिना किसी अल्फ़ान्यूमेरिक चरित्र के अधिमानतः एक लोअरकेस स्ट्रिंग तक सीमित है।

— यति

Answer 15

एक संभावना हो सकती है:

• सभी विस्तारित / मनमाने डेटा रखने के लिए एक नया div बनाएँ
• यह सुनिश्चित करने के लिए कुछ करें कि यह div अदृश्य है (जैसे CSS प्लस डिव का एक वर्ग गुण)
• इस अदृश्य div के भीतर [X] HTML टैग्स के भीतर विस्तारित / मनमाना डेटा डालें (जैसे कि टेबुल की कोशिकाओं के भीतर पाठ, या कुछ और जैसा आप चाहें)।

Answer 16

एक अन्य दृष्टिकोण एक कुंजी को संग्रहीत करने के लिए हो सकता है: निम्नलिखित सिंटैक्स का उपयोग करके एक साधारण वर्ग के रूप में मूल्य जोड़ी:

<div id="my_div" class="foo:'bar'">...</div>

यह मान्य है और इसे आसानी से jQuery के चयनकर्ताओं या कस्टम मेड फ़ंक्शन के साथ प्राप्त किया जा सकता है।

Answer 17

मेरे पिछले नियोक्ता में, हमने फॉर्म तत्वों के बारे में जानकारी रखने के लिए हर समय कस्टम HTML टैग्स का उपयोग किया। पकड़: हमें पता था कि उपयोगकर्ता को IE का उपयोग करने के लिए मजबूर किया गया था।

यह उस समय FireFox के लिए अच्छी तरह से काम नहीं किया। मुझे नहीं पता कि फ़ायर्फ़ॉक्स ने इसे बदला है या नहीं, लेकिन इस बात से अवगत रहें कि HTML तत्वों में अपनी विशेषताओं को जोड़ना आपके पाठक के ब्राउज़र द्वारा समर्थित हो भी सकता है और नहीं भी।

यदि आप नियंत्रित कर सकते हैं कि आपका पाठक कौन सा ब्राउज़र उपयोग कर रहा है (यानी एक निगम के लिए एक आंतरिक वेब एपलेट), तो हर तरह से, इसे आज़माएं। यह क्या चोट पहुंचा सकता है, है ना?

Answer 18

यह है कि मैं तुम्हें ajax पृष्ठों ... इसकी एक बहुत आसान विधि है ...

    function ajax_urls() {
       var objApps= ['ads','user'];
        $("a.ajx").each(function(){
               var url = $(this).attr('href');
               for ( var i=0;i< objApps.length;i++ ) {
                   if (url.indexOf("/"+objApps[i]+"/")>-1) {
                      $(this).attr("href",url.replace("/"+objApps[i]+"/","/"+objApps[i]+"/#p="));
                   }
               }
           });
}

यह कैसे काम करता है यह मूल रूप से उन सभी URL को देखता है जिनमें वर्ग 'ajx' होता है और यह एक कीवर्ड को बदल देता है और # चिह्न जोड़ता है ... इसलिए यदि js को बंद कर दिया जाता है, तो urls सामान्य रूप से कार्य करेंगे ... सभी " एप्लिकेशन "(साइट का प्रत्येक अनुभाग) का अपना कीवर्ड है ... इसलिए मुझे केवल इतना करना है कि अधिक पृष्ठ जोड़ने के लिए ऊपर दिए गए js सरणी में जोड़ें ...

इसलिए उदाहरण के लिए मेरी वर्तमान सेटिंग निम्न पर आधारित है:

 var objApps= ['ads','user'];

तो अगर मैं एक यूआरएल है जैसे:

www.domain.com/ads/3923/bla/dada/bla

js स्क्रिप्ट / ads / part को बदलेगा ताकि मेरा URL समाप्त हो जाए

www.domain.com/ads/#p=3923/bla/dada/bla

फिर मैं तदनुसार पेज लोड करने के लिए jquery bbq प्लगइन का उपयोग करता हूं ...

http://benalman.com/projects/jquery-bbq-plugin/

Answer 19

मैंने मेटाडेटा प्लगइन को HTML टैग के साथ मनमाने ढंग से डेटा को स्टोर करने की समस्या का एक उत्कृष्ट समाधान माना है जो कि jQuery के साथ इसे पुनः प्राप्त करना और उपयोग करना आसान बनाता है।

महत्वपूर्ण : आपके द्वारा शामिल की गई वास्तविक फ़ाइल केवल 5 kb है, न कि 37 kb (जो पूर्ण डाउनलोड पैकेज का आकार है)

यहां इसका एक उदाहरण दिया जा रहा है, जो मैं एक गूगल एनालिटिक्स ट्रैकिंग इवेंट (नोट: data.label और data.value वैकल्पिक वैकल्पिक होने के लिए) उत्पन्न करते समय उपयोग किए जाने वाले मूल्यों को संग्रहीत करने के लिए उपयोग किया जाता है)

$(function () {
    $.each($(".ga-event"), function (index, value) {
        $(value).click(function () {
            var data = $(value).metadata();
            if (data.label && data.value) {
                _gaq.push(['_trackEvent', data.category, data.action, data.label, data.value]);
            } else if (data.label) {
                _gaq.push(['_trackEvent', data.category, data.action, data.label]);
            } else {
                _gaq.push(['_trackEvent', data.category, data.action]);
            }
        });
    });
});

<input class="ga-event {category:'button', action:'click', label:'test', value:99}" type="button" value="Test"/>

Answer 20

Html में, हम उपसर्ग 'डेटा-' जैसे विशेषता नाम से पहले कस्टम विशेषताओं को संग्रहीत कर सकते हैं

<p data-animal='dog'>This animal is a dog.</p>। प्रलेखन की जाँच करें

हम इस संपत्ति का उपयोग गतिशील रूप से सेट करने और jQuery का उपयोग करके गुण प्राप्त करने के लिए कर सकते हैं: यदि हमारे पास एपी टैग जैसा है

<p id='animal'>This animal is a dog.</p>

फिर उपरोक्त टैग के लिए 'नस्ल' नामक एक विशेषता बनाने के लिए, हम लिख सकते हैं:

$('#animal').attr('data-breed', 'pug');

कभी भी डेटा प्राप्त करने के लिए, हम लिख सकते हैं:

var breedtype = $('#animal').data('breed');

Answer 21

जब तक आप वास्तविक कार्य सर्वराइड करते हैं, तब तक आपको आउटपुट में html टैग्स में कस्टम जानकारी की आवश्यकता क्यों होगी? आपको सर्वर पर वापस जानने की आवश्यकता है जो आपकी कस्टम जानकारी के साथ संरचनाओं की किसी भी प्रकार की सूची में एक सूचकांक है। मुझे लगता है कि आप जानकारी को गलत जगह संग्रहीत करना चाहते हैं।

मैं पहचानूंगा, हालांकि दुर्भाग्यपूर्ण है कि बहुत सारे मामलों में सही समाधान सही समाधान नहीं है। जिस स्थिति में मैं अतिरिक्त जानकारी रखने के लिए कुछ जावास्क्रिप्ट बनाने का दृढ़ता से सुझाव दूंगा।

कई साल बाद:

यह सवाल मोटे तौर पर तीन साल पहले पोस्ट किया गया था, data-...क्योंकि विशेषताएँ html 5 के आगमन के साथ एक वैध विकल्प बन गई थीं, इसलिए सच्चाई स्थानांतरित हो गई और मैंने जो मूल उत्तर दिया वह अब प्रासंगिक नहीं है। अब मैं इसके बजाय डेटा विशेषताओं का उपयोग करने का सुझाव दूंगा।

<a data-articleId="5" href="link/for/non-js-users.html">

<script>
    let anchors = document.getElementsByTagName('a');
    for (let anchor of anchors) {
        let articleId = anchor.dataset.articleId;
    }
</script>

Comments

फिर आपको जावास्क्रिप्ट में डेटा कैसे पारित करना चाहिए?

— निकफ