我的 HTML 中有这个:
<script id="tpl" type="text/template">
<div data-id="" class="line">
...
</div>
</script>
在 JS 中,我获取该模板以将其添加到 HTML 中,然后设置每个数据属性,如下所示:
$('.add-line').on('click', function(){
var tpl = $('#tpl').html()
$(tpl).data('id', 'TEST')
$(tpl).attr('data-id', 'TEST')
$('.target').append(tpl)
})
但是添加的这些都没有任何 data-id。我做错了什么?
最佳答案
试试这个
$('.add-line').on('click', function() {
var tpl = $($('#tpl').html()).map(function() {
if ($(this).hasClass('line')) {
$(this).attr('data-id', 'TEST');
}
return this;
});
$('.target').append(tpl);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script id="tpl" type="text/template">
<div data-id="" class="line">Test</div>
</script>
<a class="add-line">Add line</a>
<div class="target"></div>
或更短的版本,带有临时 div
$('.add-line').on('click', function(){
var content = $('#tpl').html(),
tpl = $('<div />').html(content).find('.line').attr('data-id', 'TEST');
$('.target').append(tpl);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script id="tpl" type="text/template">
<div data-id="" class="line">Test</div>
</script>
<a class="add-line">Add line</a>
<div class="target"></div>
关于javascript - 从脚本类型 ="text/template"将数据属性设置为 jQuery 对象,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33304793/