这个需要运用递归。

案例:将数据以 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】2890 Longest Repeated subsequence

    后缀数组的应用.和男人八题那个后缀数组差不多. /* 2890 */ #include <iostream> #include <sstream> #include <s ...

  2. bzoj2150,poj1422,poj1548

    其实吧,bzoj2150还是比较水的, 在你知道什么是最小路径覆盖的前提下: 最小路径覆盖就是在有向无环图中,每个点只能被一条路径关联,问最少有多少条路能覆盖这个图 方法是,把对于原图每个点我们拆成左 ...

  3. acdream 小晴天老师系列——苹果大丰收(DP)

    小晴天老师系列——苹果大丰收 Problem Description 小晴天的后花园有好多好多的苹果树,某天,苹果大丰收~小晴天总共摘了M个苹果,我们假设苹果之间是不可分辨的. 为了保存苹果,小晴天买 ...

  4. mysqldump使用

    mysqldump常用于MySQL数据库逻辑备份. 1.各种用法说明 A. 最简单的用法: mysqldump -uroot -pPassword [database name] > [dump ...

  5. EF Code First学习笔记:数据库创建

    控制数据库的位置 默认情况下,数据库是创建在localhost\SQLEXPRESS服务器上,并且默认的数据库名为命名空间+context类名,例如我们前面的BreakAway.BreakAwayCo ...

  6. mkimage工具 加载地址和入口地址 内核启动分析

    第三章第二节 mkimage工具制作Linux内核的压缩镜像文件,需要使用到mkimage工具.mkimage这个工具位于u-boot-2013. 04中的tools目录下,它可以用来制作不压缩或者压 ...

  7. MySQL查询大小写是否敏感问题分析

    mysql数据库在做查询时候,有时候是英文字母大小写敏感的,有时候又不是的,主要是由mysql的字符校验规则的设置决定的,通常默认是不支持的大小写字母敏感的.  1. 什么是字符集和校验规则? 字符集 ...

  8. C# 中winform的一些属性设置

    1 窗体的大小固定住,不能调整其大小 窗体FormBorderStyle 属性设置为 FixedSingle; MaximizeBox 属性设置为false; MinimizeBox  属性设置为  ...

  9. cdn是什么和作用有些

    内容分发网络其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节,使内容传输的更快.更稳定.通过在网络各处放置节点服务器所构 成的在现有的互联网基础之上的一层智能虚拟网络,CDN系 ...

  10. lightoj 1017

    思路:动态规划,设dp[i][j]表示在前j个dusts中用了i刷子刷掉dusts的个数:状态转移方程就是: dp[i][j] = max(dp[i][j-1], dp[i-1][j-len[j]] ...