兼容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. 自动化测试-2.seleniumIDE

    一.安装步骤 1. 打开Firefox浏览器 2. 打开https://addons.mozilla.org/en-US/firefox/addon/selenium-ide/versions/,点击 ...

  2. api管理平台

    安装和介绍 安装要求:(centos安装环境) nodejs(7.6+) mongodb(2.6|+) 安装get和编译的工具 yum -y install wget make gcc gcc-c++ ...

  3. 安装jdk1.8

    这是很普通的shell的脚本,只需要注意:echo 语句内出现的变量,需要转义! #!/bin/bash function get_current_time_stamp(){ echo `date & ...

  4. c++简单实现对mysql数据库操作

    1.连接数据库 #include <mysql.h> #include <iostream> #include<string> #include<vector ...

  5. Ubuntu16.04中pip无法更新升级,采用源码方式安装

    1.从pip官网下载最新版 https://pypi.org/project/pip/#files 2.ubuntu中创建文件位置,我的放在一下路径,之后进行解压 3.解压后进入pip的文件夹,在执行 ...

  6. memcached-redis

    http://www.runoob.com/memcached/memcached-cas.html https://github.com/memcached/memcached/blob/maste ...

  7. 用 Excel 画正态分布曲线

    用 Excel 画正态分布曲线 群里有小伙伴询问一道曲线题,有小伙伴看出来是正态分布曲线,刚好之前有大概了解一下正态分布. 可以在 Excel 很容易实现. 使用 NORMDIST 即可. 效果如下:

  8. jQuery基础（二）DOM

    DOM节点的创建 jQuery节点创建与属性的处理 创建元素节点: $("<div></div>") 创建为文本节点: $("<div> ...

  9. DataSource - 常用数据库连接池 (DBCP、c3p0、Druid) 配置说明

    1. 引言 1.1 定义 数据库连接是一种关键的有限的昂贵的资源,这一点在多用户的网页应用程序中体现得尤为突出.对数据库连接的管理能显著影响到整个应用程序的伸缩性和健壮性,影响到程序的性能指标.数据库 ...

  10. git提交代码五部曲

    From: https://jingyan.baidu.com/article/359911f5a4fe4b57fe03060d.html 正常使用git时,提交代码五部曲. 工具/原料   电脑 已 ...