DOM में डेटा विशेषता जोड़ना

Question

$('div').data('info', 1);

alert($('div').data('info'));
//this works    

$('div[data-info="1"]').text('222');
//but this don't work

मैं jquery के भीतर तत्व बना रहा हूं। उसके बाद, मैं विशेषता "डेटा" जोड़ना चाहता हूं। वह पसंद है और जोड़ा गया है, लेकिन DOM में, यह स्पष्ट नहीं है, और मैं आइटम का उपयोग नहीं कर सकता

$('div[data-example="example"]').html()

jsfiddle

Answer 1

.data()विधि का प्रयोग करें :

$('div').data('info', '222');

ध्यान दें कि यह एक वास्तविक data-infoविशेषता नहीं बनाता है । यदि आपको विशेषता बनाने की आवश्यकता है, तो उपयोग करें .attr():

$('div').attr('data-info', '222');

Comments

@ स्वैच्छिक: उपयोग करें .data()जब तक कि आपके पास वास्तव में उपयोग करने का कोई कारण न हो .attr()।

— ब्लेंडर

.data()काम नहीं करते। यह

— DOM-

यह भी एक स्ट्रिंग होना चाहिए - $ ('div')। Attr ('डेटा-जानकारी', '' + info.id)

— daviestar

लगता है जैसे .data(key, val)attr बनाएगा। किसी को पता है कि यह क्यों नहीं करता है?

— ल्यूक डब्ल्यू

Note that this doesn't create an actual data-info attribute. If you need to create the attribute, use .attr():यह मेरी समस्या की कुंजी थी। बहुत बहुत धन्यवाद।

— मिकाइल अब्दुल्लायेव

Answer 2

jQuery का .data () एक दो चीजें करता है, लेकिन यह डोम को एक विशेषता के रूप में डेटा नहीं जोड़ता है। डेटा विशेषता को हथियाने के लिए इसका उपयोग करते समय, सबसे पहले यह एक jQuery डेटा ऑब्जेक्ट बनाता है और डेटा विशेषता के लिए ऑब्जेक्ट का मान सेट करता है। उसके बाद, यह अनिवार्य रूप से डेटा विशेषता से डिकॉप्ड है।

उदाहरण:

<div data-foo="bar"></div>

यदि आपने विशेषता का मान पकड़ा है .data('foo'), तो यह "बार" लौटाएगा जैसा कि आप उम्मीद करेंगे। यदि आप तब विशेषता का उपयोग कर बदल देते हैं .attr('data-foo', 'blah')और फिर बाद .data('foo')में मान को हथियाने के लिए उपयोग करते हैं, तो यह DOM के कहने पर भी "बार" लौटा देगा data-foo="blah"। यदि आप .data()मान सेट करने के लिए उपयोग करते हैं , तो यह मान को jQuery ऑब्जेक्ट में बदल देगा, लेकिन DOM में नहीं।

मूल रूप से, .data()jQuery ऑब्जेक्ट के डेटा मान को सेट या चेक करने के लिए है। यदि आप इसकी जाँच कर रहे हैं और इसमें पहले से ही एक नहीं है, तो यह DOM में मौजूद डेटा विशेषता के आधार पर मान बनाता है। .attr()DOM तत्व की विशेषता मान को सेट करने या जाँचने के लिए है और jQuery डेटा मान को स्पर्श नहीं करेगा। आप उन दोनों को बदलना चाहते हैं तो आप दोनों का उपयोग करना चाहिए .data()और .attr()। अन्यथा, एक या दूसरे के साथ छड़ी।

Answer 3

Jquery में " डेटा " डिफ़ॉल्ट रूप से ताज़ा नहीं होता है:

alert($('#outer').html());
var a = $('#mydiv').data('myval'); //getter
$('#mydiv').data("myval","20"); //setter
alert($('#outer').html());

आप लाइव अपडेट के बजाय " attr " का उपयोग करेंगे:

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

Answer 4

 $(document.createElement("img")).attr({
                src: 'https://graph.facebook.com/'+friend.id+'/picture',
                title: friend.name ,
                'data-friend-id':friend.id,
                'data-friend-name':friend.name
            }).appendTo(divContainer);

Comments

शायद आप समझा सकते हैं कि आपके कोड में क्या चल रहा है, दूसरों की मदद करने के लिए।

— मोहम्मद शिरालिज़ादेह

Answer 5

उपयोग .data()करने से उस तत्व के लिए केवल jQuery ऑब्जेक्ट में डेटा जोड़ा जाएगा। जानकारी को उस तत्व में जोड़ने के लिए जिसे आपको jQuery .attrया देशी का उपयोग करके उस तत्व तक पहुंचना होगा.setAttribute

$('div').attr('data-info', 1);
$('div')[0].setAttribute('data-info',1);

किसी तत्व को विशेषता सेट के साथ एक्सेस करने के लिए , आप उस विशेषता के आधार पर चयन कर सकते हैं जैसा कि आप अपने पोस्ट ( $('div[data-info="1"]')) में नोट करते हैं , लेकिन जब आप उपयोग करते हैं .data()तो आप नहीं कर सकते। .data()सेटिंग के आधार पर चयन करने के लिए , आपको jQuery के फ़िल्टर फ़ंक्शन का उपयोग करना होगा।

jsFiddle Demo

$('div').data('info', 1);
//alert($('div').data('info'));//1

$('div').filter(function(){
   return $(this).data('info') == 1; 
}).text('222');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>1</div>

Answer 6

एक से पाठ प्राप्त करने के लिए

<option value="1" data-sigla="AC">Acre</option>

uf = $("#selectestado option:selected").attr('data-sigla');