兼容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. indexOf()定义和用法

    indexOf()定义和用法 indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置. 语法 stringObject.indexOf(searchvalue,fromindex) ...

  2. JAVA高级篇(二、JVM内存模型、内存管理之第二篇)

    本文转自https://zhuanlan.zhihu.com/p/25713880. JVM的基础概念 JVM的中文名称叫Java虚拟机,它是由软件技术模拟出计算机运行的一个虚拟的计算机. JVM也充 ...

  3. spring ico

    代码非常简单.如果缺少jar包将导致报错. 需要5个spring jar包和1个logging jar,否则报错. org.springframework.asm.jarorg.springframe ...

  4. js基本类型，隐式转换，变量

    Js笔记(脚本语言 node.js) Js五种基本类型:数字,字符串,布尔,null,undefined: HTML结构,表现,行为分离. 变量命名规则: 以字母或[下划线开始($)]不推荐,后面跟上 ...

  5. robot framework中的timeout的关键词

    1.默认robotframework中的含有等待的关键词(如:Wait Until Element Is Enabled),未手动设置时默认该参数为5sec 2.关键词:sleep A)一般在调试的时 ...

  6. 查询正在运行的请求及其后台对应SQL

    SELECT a.event , s.actual_start_date , a.sid, a.serial#, sa.sql_fulltext , sa.sql_text , v.user_conc ...

  7. Xamarin Android 下拉列表

    <Spinner android:id="@+id/spinner" android:layout_width="wrap_content" androi ...

  8. Web前端入门教程之浏览器兼容问题及解决方法

    JavaScript 被称为JS,是作为浏览器的内置脚本语言,为我们提供操控浏览器的能力,可以让网页呈现出各种特殊效果,为用户提供友好的互动体验.JS是Web前端入门教程中的重点和难点,而浏览器兼容性 ...

  9. FPGA 中三角函数的实现

    FPGA 中三角函数的实现

  10. 饥饿的牛（dp一维最大覆盖）

    问题 H: 饥饿的牛 时间限制: 1 Sec  内存限制: 128 MB提交: 12  解决: 12[提交][状态][讨论版][命题人:外部导入][Edit] [TestData] [同步数据] 题目 ...