兼容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. laravel 解决session保存不了，取不出的问题

    555  上传服务器的时候 storage下的framework 没有上传啊

  2. python3+requests：接口自动化测试（二）

    转载请注明出处:https://www.cnblogs.com/shapeL/p/9188495.html 前言:上篇文章python3+requests+unittest:接口自动化测试(一):ht ...

  3. hdu5000 Clone dp+大数

    After eating food from Chernobyl, DRD got a super power: he could clone himself right now! He used t ...

  4. 使用miniconda创建python虚拟环境

    安装python指定环境 conda create -n oldboy python=3.6.5 安装环境的同时安装相应的包 conda create -n oldboy python=3.6.5 p ...

  5. 账户和联系人 Accounts and Contacts 译

    原文链接: https://crmbook.powerobjects.com/basics/searching-and-navigation/understanding-accounts-and-co ...

  6. Docker修改本地镜像与容器的存储位置

    这个方法里将通过软连接来实现. 首先停掉Docker服务: systemctl restart docker或者service docker stop 然后移动整个/var/lib/docker目录到 ...

  7. icomoon：生成字体图标的方法并应用

    字体图标任意缩放不会失真,也大大减少请求数量,非常好用. 在线生成工具:https://icomoon.io/app/#/select 在线SVG图库(阿里),  用于导入:http://www.ic ...

  8. 阅读 Device Driver Programmer Guide 笔记

    阅读 Device Driver Programmer Guide 笔记 xilinx驱动命名规则 以X开头 源文件命名规则 以x打头 底层头文件与高级头文件 重点来了,关于指针的使用 其中 XDev ...

  9. 黄聪：用 CSS 实现元素垂直居中，有哪些好的方案？

    1.不知道自己高度和父容器高度的情况下, 利用绝对定位只需要以下三行: parentElement{ position:relative; } childElement{ position: abso ...

  10. 图的遍历——DFS和BFS模板(一般的图)

    关于图的遍历,通常有深度优先搜索(DFS)和广度优先搜索(BFS),本文结合一般的图结构(邻接矩阵和邻接表),给出两种遍历算法的模板 1.深度优先搜索(DFS) #include<iostrea ...