将数据属性的值附加到dom

append value of data attribute to dom

本文关键字：dom 数据属性      更新时间：2023-09-26

我想用jquery提取日期res和数据ref的值，并将其附加到它的div中。

<div id="grid">
<div class="item blue" date-res="8" date-ref="13" data-groups='["all", "letters", "blue", "square"]'>D</div>
<div class="item green" date-res="9" date-ref="10" data-groups='["all", "letters", "blue", "square"]'>E</div>
<div class="item green" date-res="2" date-ref="7" data-groups='["all", "letters", "blue", "square"]'>F</div>
</div>

使用.data()，您可以获得uts属性的值

您需要将html从date-res更改为data-res:

 <div id="grid">
    <div class="item blue" data-res="8" data-ref="13" data-groups='["all", "letters", "blue", "square"]'>D</div>
    <div class="item green" data-res="9" data-ref="10" data-groups='["all", "letters", "blue", "square"]'>E</div>
    <div class="item green" data-res="2" data-ref="7" data-groups='["all", "letters", "blue", "square"]'>F</div>
    </div>

和jQuery:

$(document).ready(function(){
    $('.item').each(function(index){
        var res = $(this).data('res');
        var ref = $(this).data('ref');
        $(this).append(res).append(ref);
    });
});

如果你不能更改html，试试这个：

$('.item').each(function(index){
    var res = $(this).attr('date-res');
    var ref = $(this).attr('date-ref');
    $(this).append(res).append(ref);
});

尝试使用.append(val1,val2)、

$('#grid div.item[data-res][data-ref]').each(function(){
  var $this = $(this);
  $this.append($this.data('res'),$this.data('ref'));
})

演示

你的html包含错误的属性名称，而不是data-，所以使用

<div id="grid">
    <div class="item blue" data-res="8" data-ref="13" data-groups='["all", "letters", "blue", "square"]'>D</div>
    <div class="item green" data-res="9" data-ref="10" data-groups='["all", "letters", "blue", "square"]'>E</div>
    <div class="item green" data-res="2" data-ref="7" data-groups='["all", "letters", "blue", "square"]'>F</div>
</div>

$('.item').each(function(index){
    var res = $(this).attr('date-res');
    var ref = $(this).attr('date-ref');
    $(this).append(res).append(ref);
});

演示：http://jsfiddle.net/U5FvG/1/

试试这个：我希望它能完美地为您服务。

$("#grid").find('.item').each(function(index,element){
    var res=$(this).attr("date-res");
     var ref=$(this).attr("date-ref");
        $(this).html("res value="+res+"  ref value="+ref);

    })
相关文章：