設置數據從腳本類型屬性jQuery對象=「文本/模板」

Question

我在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) 
}) 

但是這些添加的都沒有任何數據ID。我究竟做錯了什麼？

Answer 1

臨時DIV試試這個

$('.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>

或者更短的版本

$('.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>