Question

我正在尝试重用HTML代码段来填充JSON数据数组。以下HTML部分隐藏在某处（例如，css： #empty {display：none;} 。该块基本上定义了LI标签的HTML片段结构.L1标签的全部内容将作为循环数据的单行工作。

<ul id="empty">
    <li class="h1">
        <img class="icon" src="#link" />
        <a href="#link">NAME</a>
        <span class="count">TOTAL</span>
    </li>
</ul>

现在，如何在jQuery中填写图像src，href，锚文本和TOTAL值？从以下代码开始，如何完成它？

var item = $('#empty').clone();
// item.img.src = ??
// item.a.href == ??
// item.a.text == ??
// item.span.text = ??

$('ul#mainlist').append(item);

Answer 1

您必须在项目变量上使用find函数：

public class Timer implements Runnable {

    private long startTime, runTime;

    public Timer(long runTime){//set runtime
         this.runTime = runTime;
    }

    public void run(){
       startTime = System.currentTimeMillis();//gets system's current time in milliseconds
       while(System.currentTimeMillis() - startTime < runTime ){//loops until the current time - the start time is less then the specified run time. 
        //Runs this
       }
    }
}

这个想法是clone（）返回一个jQuery对象，因此你可以在它上面使用更多的jQuery函数，比如find。

参见示例：http://plnkr.co/edit/sduJSXwyzUv44Zk8qfyK?p=preview

Answer 2

通常的方法是在页面上创建包含模板内容的script标记，即

<script type='template/html' id='empty'>
  <li class="h1">
    <img class="icon" src="#link" />
    <a href="#link">[NAME]</a>
    <span class="count">[TOTAL]</span>
  </li>
</script>

然后，您将模板的html缓存在变量中并替换您的数据：

 var template = $('#empty').html() // cache html of the template
 var ul = $('ul.main') // cache ul where you going to insert data into

 $.ajax(...).then(function(data) {

     var html = data.myArray.map(function(e) {
         return template
                   .replace('[NAME]', e.name)
                   .replace('[TOTAL]', e.total)
                   .replace('[LINK]', e.link)
     }).join('')
     ul.html(html)
 })

重用jQuery HTML Snippet来填充JSON Array中的数据

2 个答案: