【问题标题】:Jquery template generated HTML coming outside the tagJquery 模板生成的 HTML 出现在标签之外
【发布时间】:2013-05-25 15:55:25
【问题描述】:
<ul class="messagesList ifClicked">
           <script id="questionsTemplate" type="text/x-jquery-tmpl">  
                   <li>
                      <span class="from">${source} </span>
                   </li>
             </script>
</ul>

我有上面的 jquery 模板代码。 我的预期输出就像

<ul class="messagesList ifClicked">
                   <li>
                      <span class="from">Reuters</span>
                   </li>                   
                   <li>
                      <span class="from">CNN</span>
                   </li>
                   <li>
                      <span class="from">CNN</span>
                   </li>
</ul>

但即将发生的是(在寻找萤火虫时)

<ul class="messagesList ifClicked">
           <script id="questionsTemplate" type="text/x-jquery-tmpl">  
                   <li>
                      <span class="from">${source} </span>
                   </li>
             </script>
</ul>
                       <li>
                          <span class="from">Reuters</span>
                       </li>                   
                       <li>
                          <span class="from">CNN</span>
                       </li>
                       <li>
                          <span class="from">CNN</span>
                       </li>

这种行为的原因是什么?

【问题讨论】:

    标签: javascript jquery jquery-templates


    【解决方案1】:

    我会将模板移到 ul 列表之外。这样,如果您想重置它,您可以简单地清空列表。

    HTML:

    <script id="questionsTemplate" type="text/x-jquery-tmpl">  
            <span class="from">${source} </span>
    </script>
    
    <ul class="messagesList ifClicked">
    
    </ul>
    

    JS:

    $(document).ready(function(){
    
        var list = [ 'Routers', 'CNN', 'CNN' ];
    
        var tmpl = '';
        $.each(list, function(num, el) {
            tmpl =  $('<li>').html($('#questionsTemplate').html());
            tmpl.find('.from').html(el);
            $('.messagesList').append(tmpl);
        });
    
    });
    

    DEMO and CODE

    【讨论】:

    • 嘿,谢谢@rokburgar - 我做了你给我的测试,发现我将脚本附加到错误的标签上。再次非常感谢。
    猜你喜欢
    • 1970-01-01
    • 2011-02-09
    • 2018-03-06
    • 1970-01-01
    • 1970-01-01
    • 2020-07-29
    • 2017-02-16
    • 2020-07-13
    • 1970-01-01
    相关资源
    最近更新 更多