兼容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. 【oracle入门】数据完整性约束

    数据的完整性约束是对数据描述的某种约束条件,关系型数据模型中可以有三类完整性约束:实体完整性.参照完整性和用户定义的完整性. 实体完整性Entity Integrity 一个基本关系通过对应显示世界的 ...

  2. 【转载】 星际争霸2的AI环境搭建

    原文地址: https://blog.csdn.net/qq_40244666/article/details/80957644 作者:BOY_IT_IT 来源:CSDN -------------- ...

  3. leetcode 421.Maximum XOR of Two Numbers in an Array

    题目中给定若干个数,然后任意选定两个数使得其异或值最大. 先利用样例中的: 3 10 5 25 2 8 这些数转换为二进制来看的话那么是先找到最高位的1然后与数组中其他的数相与后的数值保存到set中去 ...

  4. Python全栈之路----常用数据类型--集合

    集合(set):无序的,不重复的数据组合,它的主要作用如下:  · 去重,把一个列表变成集合,就自动去重了  · 关系测试,测试两组数据之间的交集.差集.并集等关系 1.基本操作:修改,删除,合并 & ...

  5. Centos6.5搭建Elasticsearch

    ElasticSearch是基于Lucene的搜索服务.支持分布式多用户能力的全文搜索引擎,提供RESTful web接口.Elasticsearch是用Java开发的,Apache旗下开源项目,支持 ...

  6. alpha冲刺（4/10）

    前言 队名:旅法师 作业链接 队长博客 燃尽图 会议 会议照片 会议内容 陈晓彬(组长) 今日进展: 召开会议 安排任务 博客撰写 问题困扰: pm和程序猿的交流到底应该怎么样呢,会出现,不做安排的任 ...

  7. 查看Linux磁盘空间

    df -hl 查看磁盘剩余空间 df -h 查看每个根路径的分区大小 du -sh [目录名] 返回该目录的大小 du -sm [文件夹] 返回该文件夹总M数 du -h [目录名] 查看指定文件夹下 ...

  8. 安装httpd服务

    1.yum安装httpd服务 2.启动httpd服务端口被占用 3.修改端口 4.启动httpd服务 5.输入网址是否正常能访问

  9. 添加一个pv到vg后，误删新加入的pv，报 pv * not found or rejected by a filter

    问题如下 将某一pv加入vg vgextend cl /dev/xvdb1 然后进入fdisk将xvdb1分区删掉,重新创建pv 使用lvdisplay报警告 [root@localhost ~]# ...

  10. 如何写一个makefile

    最近因为编译需求,需要更改一些编译条件,顺带看了一些Makefile相关的知识,介绍的很详细,但是例子很少,拆分的比较零碎.初学的话,确实有点压力,我还是喜欢直接在原有的基础上改一些东西,然后遇到问题 ...