这个需要运用递归。

案例:将数据以 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. poj 1035 Spell checker(水题)

    题目:http://poj.org/problem?id=1035 还是暴搜 #include <iostream> #include<cstdio> #include< ...

  2. 函数buf_LRU_free_block

    /******************************************************************//** Try to free a block. If bpag ...

  3. JSOI2008星球大战(并查集)

    膜拜HZWER大牛的编码能力! 附上他的代码(我的代码不知为何一直莫名出错……) #include<iostream> #include<cstdio> #include< ...

  4. MenuInflater用法

    MenuInflater是用来加载menu布局文件的. 与LayoutInflater类似,应用程序运行时会预先加载资源中的布局文件,如果Menu布局中的资源比较多,会影响性能,所以可以选择MenuI ...

  5. ORACLE DATAGURARD配置手记

    经过多次实践,参阅网上N多文章……最后还是配不成,可能本人悟性太低,无法体会高手的笔记.最终还是在前辈的帮助下完成.特用最平实的手法记录下来,以便如吾辈菜鸟能 看得懂. 运行Data Guard的条件 ...

  6. 新手学习数据库(一)用Powerdesigner设计数据库

    说明: 一.学会用开发语言进行数据库编程,其关键是在于学会sql语言,开发语言只不过给程序员提供了一个操作数据库的接口罢了. 二. 本人也是初学者,采用的数据库设计软件是powerdesigner.利 ...

  7. 55人班37人进清华北大的金牌教师之32条教育建言! z

    他带的一个55人的班,37人考进清华.北大,10人进入剑桥大学.耶鲁大学.牛津大学等世界名校并获全额奖学金,其他考入复旦.南开等大学.不仅 如此,校足球冠军.校运动会总冠军.校网页设计大赛总冠军等6项 ...

  8. 玩一个:可以显示任何xml树结构的xaml定义

    学习中, 玩一玩. 效果如下.Xaml随后. <Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentatio ...

  9. opencv 在工业中的应用:二维标定

    在工业中经常要检测一个零件的尺寸,但是图像处理得到的是像素值,怎么才能得到实际的毫米值呢?这就要用到二维标定,我用OPENCV写了一个利用标定板进行标定的DEMO. 很多商业软件都没有二维标定的功能, ...

  10. 【译】 AWK教程指南

    前面的话: 这几天写了一个程序,在同一个目录里生成了很多文件,需要统计其中部分文件的总大小,发现经常用到的ls.du等命令都无济于事,我甚至都想到了最笨的方法,写一个脚本:mkdir一个新目录,把要统 ...