jquery 遍历 json

<HTML>

<HEAD>

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

<TITLE></TITLE>

<style></style>

<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

<script type="text/javascript">

    <!--json  Data-->

var menulist = {

            "name":"bobo",

             "menulist": [

                 { "MID": "M001", "MName": "首页", "Url": "#", "menulist": "" },

                 { "MID": "M002", "MName": "车辆买卖", "Url": "#", "menulist":

                     [

                          { "MID": "M003", "MName": "新车", "Url": "#", "menulist":

                             [

                                 { "MID": "M006", "MName": "奥迪", "Url": "#", "menulist": "" },

                                 { "MID": "M007", "MName": "别克", "Url": "#", "menulist": "" }

                             ]

                          },

                          { "MID": "M004", "MName": "二手车", "Url": "#", "menulist": "" },

                          { "MID": "M005", "MName": "改装车", "Url": "#", "menulist": "" }

                     ]

                 },

                 { "MID": "M006", "MName": "宠物", "Url": "#", "menulist": "" }

           ]

         };

<!--js  Code-->

 $(function () {

     $("#btn_bianli").click(function () {

     });

     var showlist = $("<ul></ul>");

     showall(menulist.menulist, showlist);

     $("#div_menu").append(showlist);

 });

 //menu_list为json数据

 //parent为要组合成html的容器

 function showall(menu_list, parent) {

     for (var index in menu_list) {

         //如果有子节点，则遍历该子节点

         if (menu_list[index].menulist.length > 0) {

             //创建一个子节点li

             var li = $("<li></li>");

             var ul = $("<ul></ul>");

             //将li的文本设置好，并马上添加一个空白的ul子节点，并且将这个li添加到父亲节点中

             $(li).append(menu_list[index].MName).append(ul).appendTo(parent);

             //将空白的ul作为下一个递归遍历的父亲节点传入

             showall(menu_list[index].menulist, ul);

         }

         //如果该节点没有子节点，则直接将该节点li以及文本创建好直接添加到父亲节点中

         else {

            $("<li></li>").append(menu_list[index].MName).appendTo(parent);

         }

     }

 }

</script>

</HEAD>

<BODY>

    <button id="btn_bianli">#btn_bianli</button>

    <div id="div_menu" class="tree well"></div>

</BODY>

</HTML>

显示效果

完全引用自: http://blog.163.com/hks_blog/blog/static/21492609020151113344248/

jquery 遍历 json【转】的更多相关文章

  1. JQuery遍历json数组的3种方法

    这篇文章主要介绍了JQuery遍历json数组的3种方法,本文分别给出了使用each.for遍历json的方法,其中for又分成两种形式,需要的朋友可以参考下 一.使用each遍历 $(functio ...

  2. 【转】 jquery遍历json数组方法

    $(function () { var tbody = ""; //------------遍历对象 .each的使用------------- //对象语法JSON数据格式(当服 ...

  3. jquery遍历json与数组方法总结

    来自:http://www.php100.com/html/program/jquery/2013/0905/5927.html 先我们来参考each() 方法,each()规定为每个匹配元素规定运行 ...

  4. JS/Jquery遍历JSON对象、JSON数组、JSON数组字符串、JSON对象字符串

    JS遍历JSON对象 JS遍历JSON对象 <script> var obj = { "goodsid": "01001", "goods ...

  5. jQuery 遍历json数组的实现代码

    <script type="text/javascript"> "}]; $(d1).each(function(){ alert(this.text+&qu ...

  6. jquery遍历json的几种方法

    for循环: 1 <script> 2 var obj = { 3 "status":1, 4 "bkmsg":"\u6210\u529f ...

  7. jQuery遍历Json数组

    var jsonArray=  [{ "name": "张三", "password": "123456"},{ &qu ...

  8. jQuery遍历json

    使用 each var anObject = {one:1,two:2,three:3}; $.each(anObject,function(name,value) { alert(name); al ...

  9. jQuery 遍历 json 方法大全

    1.for循环: var obj = { "status":1, "bkmsg":"\u6210\u529f", "bkdata& ...

随机推荐

  1. jupyter notebook远程配置

    服务器端配置 在服务器生成jupyter配置文件 $jupyter notebook --generate-config 生成之后会得到配置文件的路径 启动jupyter,设置密码 In [1]: f ...

  2. TimeLine CSS/Javascript 时间线

    https://casbootadminserver.herokuapp.com/#/applications/23bd8218/trace

  3. Windows 聆听 简单使用体验

    1. 点击windows 按键 输入语音 按照操作 选择语音 并且读出那一段话. 2. 可以将windows 语音识别 添加到开始面板 3. 使用时 点击 该图标,然后点击麦克风按钮 聆听效果如图示 ...

  4. 属性动画总结（Property Animation）

    一.概述 属性动画可以作用在View的属性上,对属性进行修改,而且不要求对应的属性一定是有显示效果的. 二.属性动画的实现方式 1.基础的类Animator Animator是一个抽象类,是属性动画的 ...

  5. Delphi通过查找字符定位TADOQuery数据的位置

    通过TADOQuery的方法Locate,输入字符,查找到定位到对应的数据位置,优点快速定位,缺点是只匹配查找到的和第一个位置,无法连续定位下一个! //定位qrymembertype.Locate( ...

  6. BZOJ3996[TJOI2015]线性代数——最小割

    题目描述 给出一个N*N的矩阵B和一个1*N的矩阵C.求出一个1*N的01矩阵A.使得 D=(A*B-C)*A^T最大.其中A^T为A的转置.输出D 输入 第一行输入一个整数N,接下来N行输入B矩阵, ...

  7. VMware配置Linux虚拟机访问外网

    [虚拟机版本] 系统版本 : Centos 6.8 [连接方法] 网络模式:桥接模式 ps:本人比较喜欢用桥接,直接NAT也是可以的 [配置步骤] 1.配置网卡 #配置命令 vi /etc/sysco ...

  8. spring cloud 入门系列一：初识spring cloud

    最近看到微服务很火,也是未来的趋势, 所以就去学习下,在dubbo和spring cloud之间我选择了从spring cloud,主要有如下几种原因: dubbo主要专注于微服务中的一个环节--服务 ...

  9. Harmonic Number (II) LightOJ - 1245 （找规律？。。。）

    题意: 求前n项的n/i  的和 只取整数部分 暴力肯定超时...然后 ...现在的人真聪明...我真蠢 觉得还是别人的题意比较清晰 比如n=100的话,i=4时n/i等于25,i=5时n/i等于20 ...

  10. day31 作业试题讲解

    #__author__: Administrator #__date__: 2018/8/8 # 基础知识 # 1.文件操作有哪些模式?简述作用 # r w a 至少你要说出这三个 # rb wb a ...