兼容ie8（很实用，复制过来，仅供技术参考，更详细内容请看源地址：http://www.cnblogs.com/iyangyuan/archive/2013/12/12/3471227.html）

<!DOCTYPE html>

<html>

  <head>

    <META http-equiv=Content-Type content="text/html; charset=utf-8">

    <title>each嵌套 - by 杨元</title>

  </head>

  <body>

    <h1>each嵌套</h1>

    <!--基础html框架-->

    <div id="dataList"></div>

    <!--插件引用-->

    <script type="text/javascript" src="script/jquery.js"></script>

    <script type="text/javascript" src="script/handlebars-1.0.0.beta.6.js"></script>

    <!--Handlebars.js模版-->

    <!--Handlebars.js模版放在script标签中，保留了html原有层次结构,模版中要写一些操作语句-->

    <!--id可以用来唯一确定一个模版,type是模版固定的写法-->

    <script id="table-template" type="text/x-handlebars-template">

      {{#each this}}

        {{#each info}}

          {{../name}}的{{this}}<br>

        {{/each}}

      {{/each}}

    </script>

    <!--进行数据处理、html构造-->

    <script type="text/javascript">

      $(document).ready(function() {

        //模拟的json对象

         var data = [{

                      "name":"张三",

                      "info":[

                        "眼睛",

                        "耳朵",

                        "鼻子"

                      ]

                    },{

                      "name":"李四",

                      "info":[

                        "爸爸",

                        "妈妈",

                        "妻子"

                      ]

                    }];

        //注册一个Handlebars模版，通过id找到某一个模版，获取模版的html框架

        //$("#table-template").html()是jquery的语法，不懂的童鞋请恶补。。。

        var myTemplate = Handlebars.compile($("#table-template").html());

        //将json对象用刚刚注册的Handlebars模版封装，得到最终的html，插入到基础table中。

        $('#dataList').html(myTemplate(data));

      });

    </script>

  </body>

</html>

使用jQuery+huandlebars遍历数组嵌套数组的更多相关文章

  1. 使用jQuery+huandlebars遍历数组

    兼容ie8(很实用,复制过来,仅供技术参考,更详细内容请看源地址:http://www.cnblogs.com/iyangyuan/archive/2013/12/12/3471227.html) & ...

  2. 使用jQuery+huandlebars遍历展示对象中的数组

    兼容ie8(很实用,复制过来,仅供技术参考,更详细内容请看源地址:http://www.cnblogs.com/iyangyuan/archive/2013/12/12/3471227.html) & ...

  3. 使用jQuery+huandlebars遍历if判断不足引用helper

    兼容ie8(很实用,复制过来,仅供技术参考,更详细内容请看源地址:http://www.cnblogs.com/iyangyuan/archive/2013/12/12/3471227.html) & ...

  4. 使用jQuery+huandlebars遍历中if判断

    兼容ie8(很实用,复制过来,仅供技术参考,更详细内容请看源地址:http://www.cnblogs.com/iyangyuan/archive/2013/12/12/3471227.html) & ...

  5. jquery中each遍历对象和数组示例

    通用遍历方法,可用于遍历对象和数组.$().each(),回调函数拥有两个参数: 第一个为对象的成员或数组的索引,第二个为对应变量或内容.如需退出each循环可使回调函数返回false 现有如下两个s ...

  6. jquery $.each遍历json数组方法

    <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/ ...

  7. javascript 常见数组操作（ 1、数组整体元素修改 2、 数组筛选 3、jquery 元素转数组 4、获取两个数组中相同部分或者不同部分 5、数组去重并倒序排序 6、数组排序 7、数组截取slice 8、数组插入、删除splice(需明确位置) 9、数组遍历 10、jQuery根据元素值删除数组元素的方）

    主要内容: 1.数组整体元素修改 2. 数组筛选 3.jquery 元素转数组 4.获取两个数组中相同部分或者不同部分 5.数组去重并倒序排序 6.数组排序 7.数组截取slice 8.数组插入.删除 ...

  8. jquery里遍历普通数组和多维数组的方法及实例

    jquery里遍历数组用的是$.each,下面站长给大家几个具体的实例: 实例1.遍历一个普通的一维数组: 1 2 3 4 5 6 7 8 <script> //声明数据有下面两种方式 / ...

  9. js和jquery中的遍历对象和数组（forEach，map，each）

    arr[].forEach(function(value,index,array){ //do something }) 参数:value数组中的当前项,index当前项的索引,array原始数组: ...

随机推荐

  1. yum 的 group的信息

    查找 yum源中有哪些group及其详细信息 1:yum groupinfo '*' | less 2:yum groupinfo '*' | less +/sendmail-cf 将 sendmai ...

  2. IDEA控制台乱码解决

    打开Intellij的安装的bin目录(D:\Program Files\JetBrains\IntelliJ IDEA 14.0\bin ),找到上图的两个文件(根据你的系统是32位或64位选择其中 ...

  3. Centos6.5修改镜像为国内的阿里云源

    第一步:备份你的原镜像文件,以免出错后可以恢复. mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-Base.repo.back ...

  4. echarts画饼环状饼图相关参数配置

    今天做页面的时候用到了环状饼图,大家都知道echarts的API文档看起来实在费劲,折腾了半天才画出来我想要的饼图,把我用到的参数配置分享给大家,希望能帮到和我一样的对echarts不是那么熟悉的童鞋 ...

  5. mysql与mysqli的区别

    博客搬家了,欢迎大家关注,https://bobjin.com mysqli连接是永久连接,而MySQL是非永久连接. mysql连接:每当第二次使用的时候,都会重新打开一个新的进程. mysqli连 ...

  6. oracle database 11g 如何正确卸载

    如在使用过程中,遇到oracle database 的疑难问题,需要重装的时候,就需要我们先将老的oracle 做完全的卸载删除,这样才能安装新的oracle database. 下面看一下具体的卸载 ...

  7. K2路由器刷机教程

    http://blog.sina.com.cn/s/blog_dc642faa0102x1on.html 方法:先降价——刷入breed——刷入固件 1.K2路由固件版本为V22.4.5.39 / V ...

  8. HDU5542 The Battle of Chibi

    题意 给出长度为n的序列,问这个序列中有多少个长度为m的单调递增子序列. \(1\le M\le N\le 1000\) 分析 用F[i,j]表示前j个数构成以Aj为结尾的数列中,长度为i的严格递增子 ...

  9. Vue创建头部组件示例

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta ht ...

  10. java_注解

    注解1    注解的概念    jdk自带的注解    声明与使用注解的基本语法        注解的概念        在javaEE与开源框架中广泛使用,泛型在集合框架中广泛使用        注 ...