ডিওমে ডেটা অ্যাট্রিবিউট যুক্ত করা হচ্ছে


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

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

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

আমি jquery মধ্যে উপাদান তৈরি করছি। এর পরে, আমি "ডেটা" বৈশিষ্ট্য যুক্ত করতে চাই। তিনি পছন্দ করেন এবং যুক্ত হন, তবে ডিওএম-তে এটি স্পষ্ট নয় এবং ব্যবহার করে আমি জিনিসটি পেতে পারি না

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

jsfiddle

উত্তর:


423

.data()পদ্ধতিটি ব্যবহার করুন :

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

মনে রাখবেন যে এটি কোনও আসল data-infoবৈশিষ্ট্য তৈরি করে না । আপনার যদি অ্যাট্রিবিউট তৈরি করতে হয় তবে ব্যবহার করুন .attr():

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

6
@ লুনটেগ: .data()যদি না আপনার ব্যবহারের কারণ না থাকে তবে ব্যবহার করুন .attr()
ব্লেন্ডার

9
.data()কাজ করবেন না এটি
ডিওমে

2
। $ ( 'DIV আছে') ATTR ( 'ডেটা-তথ্য', '+ info.id) - এটি একটি স্ট্রিং হতে হয়েছে
daviestar

1
মনে .data(key, val)হয় এটির তৈরি করবে। কেন কেউ তা জানেন না?
লুক ডাব্লু

16
Note that this doesn't create an actual data-info attribute. If you need to create the attribute, use .attr():এটিই ছিল আমার সমস্যার মূল চাবিকাঠি। অনেক ধন্যবাদ.
মিকায়েল আবদুললেভ

28

jQuery এর .ডাটা () কয়েকটি কাজ করে তবে এটি কোনও বৈশিষ্ট্য হিসাবে DOM এ ডেটা যুক্ত করে না। কোনও ডেটা অ্যাট্রিবিউট দখল করার জন্য এটি ব্যবহার করার সময়, এটি প্রথমে যা করে তা হ'ল একটি জিকুয়েরি ডেটা অবজেক্ট তৈরি করে এবং বস্তুর মান ডেটা অ্যাট্রিবিউটকে সেট করে। এর পরে, এটি ডেটা অ্যাট্রিবিউট থেকে মূলত ডিকপলড হয়।

উদাহরণ:

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

আপনি যদি ব্যবহার করে গুণকের মানটি ধরে নেন তবে .data('foo')এটি আপনার প্রত্যাশা অনুযায়ী "বার" ফিরে আসবে। এরপরে আপনি যদি মানটিটি ব্যবহার করে বিশিষ্টতাটি পরিবর্তন করেন .attr('data-foo', 'blah')এবং পরে .data('foo')মানটি দখল করতে ব্যবহার করেন তবে এটি ডিওএম বললেও "বার" ফিরে আসবে data-foo="blah"। আপনি যদি .data()মান সেট করতে ব্যবহার করেন তবে এটি jQuery অবজেক্টে DOM তে নয় তবে মানটি পরিবর্তন করবে।

মূলত, .data()jQuery অবজেক্টের ডেটা মান নির্ধারণ বা পরীক্ষা করার জন্য। আপনি যদি এটি যাচাই করে থাকেন এবং এর মধ্যে ইতিমধ্যে একটিটি নেই, এটি ডিওমে থাকা ডেটা অ্যাট্রিবিউটের ভিত্তিতে মান তৈরি করে। .attr()এটি ডিওএম উপাদানটির বৈশিষ্ট্যযুক্ত মানটি নির্ধারণ বা পরীক্ষার জন্য এবং jQuery ডেটা মানটি স্পর্শ করবে না। আপনার যদি উভয়কে পরিবর্তন করার প্রয়োজন হয় তবে আপনার উভয় .data()এবং ব্যবহার করা উচিত .attr()। অন্যথায়, এক বা অন্য সাথে লেগে থাকুন।


14

জ্যাকুয়েরিতে " ডেটা " ডিফল্টরূপে রিফ্রেশ হয় না:

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

আপনি সরাসরি আপডেটের পরিবর্তে " অ্যাটর্নি " ব্যবহার করবেন:

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

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);

3
অন্যদের সহায়তা করার জন্য, আপনি নিজের কোডটিতে কী চলছে তা ব্যাখ্যা করতে পারেন।
মোহামাদ শিরালীজাদেহ

3

ব্যবহার .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>


0

একটি থেকে পাঠ্য পেতে

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

uf = $("#selectestado option:selected").attr('data-sigla');
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.