首页 > Web开发 > 详细

16 使用jquery-tmpl完成遍历

时间:2020-03-16 18:06:03      阅读:63      评论:0      收藏:0      [点我收藏+]

jQuery-tmpl是一个简单的模板引擎,能够实现动态展示DOM数据。本节将提供一个极简单的jquery-tmpl的demo。

1、操作步骤

  • 创建一个文件夹jquery-tmpl-demo
  • 在jquery-tmpl-demo文件夹下导入jquery.tmpl.js、jquery-3.2.1.js
  • 在jquery-tmpl-demo文件夹下创建index.html
<!DOCTYPE html>
<html>

    <head>
        <meta charset="GBK">
        <script type="text/javascript" src="jquery-3.2.1.js"></script>
        <script type="text/javascript" src="jquery.tmpl.js"></script>
    </head>

    <body>

<div id="div_each"></div>
<script id="each" type="text/x-jquery-tmpl"> 
    <h3>users</h3>
    {{each(i,user) users}}
        <div>${i+1}:{{= user.name}}</div>
    {{/each}}
    <h4>group</h4>
    {{each(j,group) groups}}
        {{if j%2==0}}
        <div>${j}:${group.name}</div>
        {{/if}}
    {{/each}}
    <h3>depart</h3>
    {{each departs}}
        <div>{{= $value.name}}</div>
    {{/each}}
</script> 
<script type="text/javascript">
    var eachData = { users: [{ name: 'ali' }, { name: 'xiaoli'}], groups: [{ name: 'java' }, { name: 'python' }, { name: 'cpp'}], departs: [{ name: '开发'},{ name: '测试'}] };
    $("#each").tmpl(eachData).appendTo('#div_each');
</script>
</body>
</html>
  • 测试
    点击index.html,展示结果。

16 使用jquery-tmpl完成遍历

原文:https://www.cnblogs.com/alichengxuyuan/p/12504479.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!