javascript - 从脚本类型=“文本/模板”将数据属性设置为jQuery对象

我的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。我做错什么了？

最佳答案

试试这个

$('.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 - 从脚本类型=“文本/模板”将数据属性设置为jQuery对象，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/33304793/