การเพิ่มคุณสมบัติข้อมูลไปที่ DOM

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

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

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

ฉันกำลังสร้างองค์ประกอบภายใน jquery หลังจากนั้นฉันต้องการเพิ่มคุณสมบัติ "data" เขาชอบและถูกเพิ่มเข้ามา แต่ใน DOM สิ่งนี้ไม่ชัดเจนและฉันไม่สามารถใช้ไอเท็มได้

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

jsfiddle

ใช้.data()วิธีการ:

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

โปรดทราบว่านี่จะไม่สร้างdata-infoแอตทริบิวต์จริง หากคุณต้องการสร้างคุณลักษณะให้ใช้.attr():

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

.data ของ jQuery () ทำสิ่งต่าง ๆ สองอย่าง แต่จะไม่เพิ่มข้อมูลลงใน DOM เป็นแอตทริบิวต์ เมื่อใช้เพื่อคว้า data data สิ่งแรกที่ทำคือสร้างวัตถุข้อมูล jQuery และตั้งค่าของวัตถุเป็น data data หลังจากนั้นก็แยกออกจาก data attribute เป็นหลัก

ตัวอย่าง:

<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()มิฉะนั้นติดกับอย่างใดอย่างหนึ่ง

ใน Jquery " data " ไม่รีเฟรชตามค่าเริ่มต้น:

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

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

การใช้.data()จะเพิ่มข้อมูลไปยังวัตถุ jQuery สำหรับองค์ประกอบนั้นเท่านั้น ในการเพิ่มข้อมูลไปยังองค์ประกอบคุณต้องเข้าถึงองค์ประกอบนั้นโดยใช้ jQuery's .attrหรือ native.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>

เพื่อรับข้อความจาก

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

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