एचटीएमएल तत्वों में डेटा विशेषताएँ कैसे सेट करें

Question

मेरे पास एक विशेषता के साथ एक div है data-myval = "10"। मैं इसके मूल्य को अद्यतन करना चाहता हूं; अगर मैं उपयोग div.data('myval',20)करूं तो क्या यह नहीं बदलेगा ? क्या मुझे div.attr('data-myval','20')केवल उपयोग करने की आवश्यकता है ?

क्या मैं HTML5 और jQuery के बीच भ्रमित हो रहा हूं? कृपया सलाह दें। धन्यवाद!

EDIT: अपडेट किया div.data('myval')=20गया div.data('myval',20), लेकिन फिर भी HTML अपडेट नहीं हो रहा है।

Comments

में क्या है div? एक jQuery वस्तु या तत्व?

— ब्रैड

div.data('myval')=20केवल मान को संग्रहीत करने के लिए काम नहीं करेगा क्योंकि सिंटैक्स गलत है - सही सिंटैक्स के उत्तर देखें। लेकिन ध्यान दें कि .data()वास्तव में तत्व विशेषता को अद्यतन नहीं करता है , यह डेटा को कहीं और संग्रहीत करता है।

— nnnnnn

उन लोगों के लिए जिनके पास जीआईकेई से बचने की भावना है -> div.dataset.myval = '20';

— हरिज कृष्णिस

Answer 1

एचटीएमएल

<div id="mydiv" data-myval="10"></div>

जे एस

var a = $('#mydiv').data('myval'); //getter

$('#mydiv').data('myval',20); //setter

डेमो

संदर्भ

संदर्भ से:

jQuery स्वयं .data()'ईवेंट' और 'हैंडल' नामों के तहत जानकारी को सहेजने के लिए विधि का उपयोग करता है , और आंतरिक उपयोग के लिए अंडरस्कोर ('_') से शुरू होने वाले किसी भी डेटा नाम को भी सुरक्षित रखता है।

यह ध्यान दिया जाना चाहिए कि jQuery HTML में विशेषता को data()नहीं बदलता है data।

इसलिए, यदि आपको dataHTML में विशेषता बदलने की आवश्यकता है, तो आपको .attr()इसके बजाय उपयोग करना चाहिए ।

एचटीएमएल

<div id="outer">
    <div id="mydiv" data-myval="10"></div>
</div>

जे एस:

alert($('#outer').html());   // alerts <div id="mydiv" data-myval="10"> </div>
var a = $('#mydiv').data('myval'); //getter
$('#mydiv').attr("data-myval","20"); //setter
alert($('#outer').html());   //alerts <div id="mydiv" data-myval="20"> </div>

इस डेमो को देखें

Comments

मुझे नहीं पता कि आपको किस स्थिरता की आवश्यकता है, लेकिन मैं और HTML-5 डेटा विशेषताओं का उपयोग data()करने की सलाह दूंगा। getset

— जशवंत

@ जशवंत इसके बजाय एक उपयोगी संपादन हो सकता है: एक सीएसएस नियम के बारे में सोचें [data-myval="10"]{ color: red; }, यह डेटा विशेषता के मूल्य के अनुसार टैग को स्टाइल करेगा।

— टेकनिक्विस्ट

.data काम नहीं करता है .attr काम करता है। हो सकता है कि हम उत्तर को स्पष्ट करने के लिए उसे संपादित कर सकें। ऐसा लगता है कि पहला समाधान है, जबकि यह थोड़ा बेहतर हो सकता है। मैं बेहतर तरीके से समझाने के बारे में निश्चित नहीं हूं, यही कारण है कि मैं पोस्ट को संपादित नहीं करता हूं।

— गौचो

@ गौचाओ, क्या यह अब बेहतर है?

— जशवंत

@Gaucho .data केवल तभी काम करेगा जब आप पुराने संस्करणों के लिए नए jQuery> = 1.4.3 का उपयोग करेंगे।

— इलियास

Answer 2

आप निम्न attrचीज़ का भी उपयोग कर सकते हैं ;

एचटीएमएल

<div id="mydiv" data-myval="JohnCena"></div>

लिपि

 $('#mydiv').attr('data-myval', 'Undertaker'); // sets 
 $('#mydiv').attr('data-myval'); // gets

या

$('#mydiv').data('myval'); // gets value
$('#mydiv').data('myval','John Cena'); // sets value

Comments

मेरे लिए केवल .attr के साथ काम किया। क्या यह भी संभव है?

— जरीवेया

मुझे खुशी है कि इसने काम किया। .Data () कॉल विशेष है - न केवल यह HTML5 डेटा विशेषताओं को पुनर्प्राप्त करता है यह विशेषताओं का मूल्यांकन / पार्स करने का भी प्रयास करता है। इसलिए डेटा-मायवल = '{"हेल्लो": "वर्ल्ड"} जैसी विशेषता के साथ .data () के माध्यम से पुनर्प्राप्त किए जाने के दौरान .attr () के माध्यम से एक वस्तु वापस आ जाएगी।

— बकर नकवी

Answer 3

कृपया ध्यान रखें कि .data()जब आप data-जावास्क्रिप्ट के साथ html5 विशेषताओं को बदलते हैं तो jQuery अपडेट नहीं होता है ।

यदि आप HTML तत्वों में विशेषताएँ .data()सेट करने के लिए jQuery का उपयोग करते हैं तो आप उन्हें पढ़ने के data-लिए jQuery .data()का बेहतर उपयोग करते हैं। यदि आप विशेषताओं को गतिशील रूप से अद्यतन करते हैं तो अन्यथा विसंगतियां हो सकती हैं। उदाहरण के लिए, को देखने के setAttribute(), dataset(), attr()नीचे। मान बदलें, बटन को कई बार पुश करें और कंसोल देखें।

$("#button").on("click", function() {
  var field = document.querySelector("#textfield")

  switch ($("#method").val()) {
    case "setAttribute":
      field.setAttribute("data-customval", field.value)
      break;
    case "dataset":
      field.dataset.customval = field.value
      break;
    case "jQuerydata":
      $(field).data("customval", field.value)
      break;
    case "jQueryattr":
      $(field).attr("data-customval", field.value)
      break;
  }

  objValues = {}
  objValues['$(field).data("customval")'] = $(field).data("customval")
  objValues['$(field).attr("data-customval")'] = $(field).attr("data-customval")
  objValues['field.getAttribute("data-customval")'] = field.getAttribute("data-customval")
  objValues['field.dataset.customval'] = field.dataset.customval

  console.table([objValues])
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h1>Example</h1>
<form>
  <input id="textfield" type="text" data-customval="initial">
  <br/>
  <input type="button" value="Set and show in console.table (F12)" id="button">
  <br/>
  <select id="method">
    <option value="setAttribute">setAttribute</option>
    <option value="dataset">dataset</option>
    <option value="jQuerydata">jQuery data</option>
    <option value="jQueryattr">jQuery attr</option>
  </select>
  <div id="results"></div>
</form>

Answer 4

वेनिला जावास्क्रिप्ट समाधान

एचटीएमएल

<div id="mydiv" data-myval="10"></div>

जावास्क्रिप्ट:

• DOM की getAttribute()संपत्ति का उपयोग करना

   var brand = mydiv.getAttribute("data-myval")//returns "10"
   mydiv.setAttribute("data-myval", "20")      //changes "data-myval" to "20"
   mydiv.removeAttribute("data-myval")         //removes "data-myval" attribute entirely

• जावास्क्रिप्ट की datasetसंपत्ति का उपयोग करना

  var myval = mydiv.dataset.myval     //returns "10"
  mydiv.dataset.myval = '20'          //changes "data-myval" to "20"
  mydiv.dataset.myval = null          //removes "data-myval" attribute

Answer 5

यदि आप jQuery का उपयोग कर रहे हैं, तो उपयोग करें .data():

div.data('myval', 20);

आप के साथ मनमाना डेटा स्टोर कर सकते हैं .data(), लेकिन उपयोग करते समय आप केवल तार तक ही सीमित रहते हैं .attr()।

Comments

ध्यान दें कि .data()विधि विशेषताओं को अपडेट नहीं करती है - अर्थात, जो डेटा संग्रहीत करता है वह एक विशेषता में समाप्त नहीं होता है (यही कारण है कि यह गैर-स्ट्रिंग मानों को संग्रहीत कर सकता है) भले ही यह एक विशेषता से मान प्राप्त कर सकता है । हालांकि मुझे संदेह है कि ओपी को वास्तव में विशेषताओं को सेट करने की आवश्यकता नहीं है, भले ही यह सवाल पूछा गया हो। data- data-

— nnnnnn

मुझे नहीं लगता कि यह एक समस्या होगी (इसके अलावा आपने जो उल्लेख किया है, या यदि कोई अन्य कोड है जो .attr()विशेषता को पुनः प्राप्त करने के लिए उपयोग करता है)। मैंने अभी सोचा कि यह इंगित करने लायक था कि ओपी स्पष्ट रूप से (यदि शायद गलती से) अद्यतन विशेषताओं के बारे में पूछा।

— nnnnnn

@ ब्लेंडर यह वास्तव में मेरे प्रश्न का उत्तर नहीं देता है। मैं HTML को अपडेट करना चाहता हूं, लेकिन साथ ही इसे पुनः प्राप्त करने के लिए element.data ('myval') का उपयोग करता हूं।

— पुलकित मित्तल

मुझे ऐसा करने की आवश्यकता है क्योंकि दस्तावेज़ लोड पर उत्पन्न तत्वों में डेटा-विशेषताएँ हैं, और मैं नए गतिशील तत्वों के लिए भी ऐसा करना चाहता हूं। मुझे पता है कि इसके लिए कोई विशेष आवश्यकता नहीं हो सकती है, लेकिन मैं एक निरंतरता रखना चाहता हूं।

— पुलकित मित्तल

@PulkitMittal - ध्यान दें कि .attr()आप वास्तव में "html" अपडेट नहीं कर रहे हैं, तो आप DOM को अपडेट कर रहे हैं। जब आप ब्राउज़र को आपको "html" (चाहे .html()या डोम element.innerHTML) देने के लिए कहें, तो ब्राउज़र उस समय डोम की स्थिति के आधार पर आपके लिए इसे प्रभावी रूप से पुनर्जीवित कर रहा है। की तरह।

— nnnnnn

Answer 6

[jQuery] .डाटा () बनाम .attr () बनाम .extend ()

JQuery विधि .data()अद्यतन के माध्यम से jQuery द्वारा प्रबंधित एक आंतरिक वस्तु को अपडेट करती है, अगर मैं सही हूं।

यदि आप data-attributesकुछ प्रसार के साथ अपने अद्यतन करना चाहते हैं, तो उपयोग करें -

$('body').attr({ 'data-test': 'text' });

- अन्यथा, $('body').attr('data-test', 'text');ठीक काम करेगा।

एक और तरीका है जिससे आप इसे पूरा कर सकते हैं -

$.extend( $('body')[0].dataset, { datum: true } );

- जो किसी भी विशेषता परिवर्तन को प्रतिबंधित करता है HTMLElement.prototype.dataset, कोई अतिरिक्त नहींHTMLElement.prototype.attributes ।

Answer 7

डेटा सेट करने का दूसरा तरीका- विशेषता डेटासेट गुण का उपयोग कर रहा है ।

<div id="user" data-id="1234567890" data-user="johndoe" data-date-of-birth>John Doe</div>

const el = document.querySelector('#user');

// el.id == 'user'
// el.dataset.id === '1234567890'
// el.dataset.user === 'johndoe'
// el.dataset.dateOfBirth === ''

// set the data attribute
el.dataset.dateOfBirth = '1960-10-03'; 
// Result: el.dataset.dateOfBirth === 1960-10-03

delete el.dataset.dateOfBirth;
// Result: el.dataset.dateOfBirth === undefined

// 'someDataAttr' in el.dataset === false
el.dataset.someDataAttr = 'mydata';
// Result: 'someDataAttr' in el.dataset === true

Answer 8

JQuery और DOM को सिंक में रखने के लिए एक सरल विकल्प हो सकता है

$('#mydiv').data('myval',20).attr('data-myval',20);