这个需要运用递归。

案例:将数据以 ul li ul li形式展现在div中。

<div id="div"></div>

数据格式为json:

var data=[
    {id:1, name:"信息1",
        children :[{id:1, name:"信息1-1-1"},{id:1, name:"信息1-1-2",
            children :[{id:1, name:"信息1-2-1"},{id:1, name:"信息1-2-2",
                children :[{id:1, name:"信息1-3-1"},{id:1, name:"信息1-3-2"}]
            }]
        }]
    },
    {id:1, name:"信息2",
        children :[{id:1, name:"信息2-1-1"},{id:1, name:"信息2-1-2",
            children :[{id:1, name:"信息2-2-1"},{id:1, name:"信息2-2-2"}]
        }]
    }
];

函数:

function nodeHtml(data){
    if(data.length > 0){
        var _html = '<ul>';
        for(var key in data) {
            _html += '<li id="'+ data[key]['id'] +'">'+ data[key]['name'] +'</li>';
            if(data[key]['children'] != undefined){
                _html += nodeHtml(data[key]['children']);
            }
        }
        _html += '</ul>';
        return _html;
    }
}

最后:

var html = nodeHtml(data);
$('#div').html(html);

显示样式:

js 如何将无限级分类展示出来的更多相关文章

  1. MVC无限级分类02,增删改查

    继上一篇"MVC无限级分类01,分层架构,引入缓存,完成领域模型与视图模型的映射",本篇开始MVC无限级分类的增删改查部分,源码在github. 显示和查询 使用datagrid显 ...

  2. php无限级分类实战——评论及回复功能

    经常在各大论坛或新闻板块详情页面下边看到评论功能,当然不单单是直接发表评论内容那么简单,可以对别人的评论进行回复,别人又可以对你的回复再次评论或回复,如此反复,理论上可以说是没有休止,从技术角度分析很 ...

  3. (实用篇)PHP递归实现无限级分类

    在一些复杂的系统中,要求对信息栏目进行无限级的分类,以增强系统的灵活性.那么PHP是如何实现无限级分类的呢?我们在本文中使用递归算法并结合mysql数据表实现无限级分类. 在一些复杂的系统中,要求对信 ...

  4. PHP无限级分类-递归(不推荐)

    [http://www.helloweba.com/view-blog-204.html] 在一些复杂的系统中,要求对信息栏目进行无限级的分类,以增强系统的灵活性.那么PHP是如何实现无限级分类的呢? ...

  5. C#无限级分类递归显示示例

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="RoleDemo20150305 ...

  6. flex 布局 实现电商网页菜单的多级分类展示

    用flex,实现多级菜单分类展示,这里记录一下,方便以后查阅. 效果展示如下: 跟上面floor的设计差不多,鼠标hover全部商品分类的时候,将下拉列表展示在指定区域,这个类似鼠标悬浮商品图片期待上 ...

  7. vue 无限级分类导航

    递归组件,实现无限级分类导航 https://cn.vuejs.org/v2/guide/components-edge-cases.html#%E9%80%92%E5%BD%92%E7%BB%84% ...

  8. PHP递归实现无限级分类

    在一些复杂的系统中,要求对信息栏目进行无限级的分类,以增强系统的灵活性.那么PHP是如何实现无限级分类的呢?我们在本文中使用递归算法并结合mysql数据表实现无限级分类. 在一些复杂的系统中,要求对信 ...

  9. ThinkPHP自动填充实现无限级分类的方法

    这篇文章主要介绍了ThinkPHP自动填充实现无限级分类的方法,是ThinkPHP项目开发中非常实用的一个技巧,需要的朋友可以参考下   本文实例展示了ThinkPHP自动填充实现无限级分类的方法,是 ...

随机推荐

  1. 【HDOJ】4601 Letter Tree

    挺有意思的一道题,思路肯定是将图转化为Trie树,这样可以求得字典序.然后,按照trie的层次求解.一直wa的原因在于将树转化为线性数据结构时要从原树遍历,从trie遍历就会wa.不同结点可能映射为t ...

  2. poj1925Spiderman(dp)

    链接 确实是破题 按复杂度估计怎么着也不能按坐标D 啊 网上的代码交上去还TLE 无语了  多次TLE之后终于看到一次WA..好高兴 以横坐标进行DP dp[j] = min(dp[j],dp[2*x ...

  3. SCOI2010游戏

    发现这题的并查集做法真是惊呆了 不过似乎匹配跑得更快? 对于一个联通块,假如不含环(就是一棵树),那么必定可以满足其中任意的p-1个点. 对于一个联通块,假如含环,那么必定全部的p个点都能满足. 那么 ...

  4. 【转】iOS中16进制转10进制

    原文网址:http://www.voidcn.com/blog/u012198553/article/p-4976772.html /// 将十六进制的字符串转化为NSData - (NSData ) ...

  5. (一)学习MVC之制作验证码

    制作验证码的方法在@洞庭夕照 看到的,原文链接:http://www.cnblogs.com/mzwhj/archive/2012/10/22/2720089.html 现自己利用该方法制作一个简单的 ...

  6. SharePoint 2010 使用自定义aspx页面替换列表默认的新建(NewForm.aspx),查看(DispForm.aspx)和编辑(EditForm.aspx)页面

    转:http://www.cnblogs.com/sygwin/archive/2011/11/04/2236678.html 如何使用自定义的aspx页(比如Application Page)替换列 ...

  7. Asp.net mvc中整合autofac

    创建Asp.net MVC并引入Autofac 首先,创建一个MVC站点,为方便起见,选初始带HomeController和AccountController的那种.然后通过NuGet或到Autofa ...

  8. DELL R710服务器可以安装的VMWare ESX Server 4.1 全套下载带注册码

    随着R710的停产,R720随之面世,但DELL R720服务器只支持vmware esxi5.0以上,DELL客户经理给了一套系统安装后序列号无法解决,还是用4.1好了,却又发现怎么都无法安装.按网 ...

  9. [tensorflow in a nutshell] tensorflow简明教程 (第一部分)

    原文链接: https://medium.com/@camrongodbout/tensorflow-in-a-nutshell-part-one-basics-3f4403709c9d#.31jv5 ...

  10. NOIP2010 引水入城

    4引水入城 题目描述 在一个遥远的国度,一侧是风景秀美的湖泊,另一侧则是漫无边际的沙漠.该国的行政区划十分特殊,刚好构成一个N 行M 列的矩形,如上图所示,其中每个格子都代表一座城市,每座城市都有一个 ...