这个需要运用递归。

案例:将数据以 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. IOS,Object C学习过程中遇到的attributes

    @property 定义一个属性 @synthesize 告诉编译器自动为属性自动生成 getter 和setter方法 在定义属性的时候会用到如下@attributes nonatomic,告诉编译 ...

  2. 1890. Money out of Thin Air(线段树 dfs转换区间)

    1890 将树的每个节点都转换为区间的形式 然后再利用线段树对结点更新 这题用了延迟标记 相对普通线段树 多了dfs的转换 把所要求的转换为某段区间 RE了N次 最后没办法了 记得有个加栈的语句 拿来 ...

  3. 解决windows下vim方向键变成 ABCD 的问题

    一.问题描述: windows下面要安装git --> 安装了 msys2 -->安装并更新了 vim(7.4),然后在使用过程中发现vim不能使用  BACKSPACE 键,按方向键会打 ...

  4. 第三部分 overlay 学习

    前文仅了解了overlay HAL的架构,下面继续看看系统层是如何调用Overlay模块. 1.测试代码 frameworks/base/libs/surfaceflinger/tests/overl ...

  5. 函数fsp_alloc_seg_inode_page

    分配一个新的inode page /**********************************************************************//** Allocat ...

  6. js不能执行,IE处理方法

    一.如果你的ie不能打开js脚本(连系统里所有的js文件都不运行,网页上的js广告或好多页面都显示不了),请按一下步骤进行排查与解决: 1.查看是否IE的安全里面禁止了JS的运行: 将工具=>i ...

  7. IE的体系和webrowser

    IE的体系 WebBrowser Host首先,必须有COM的基础知识,因为IE本身就是COM技术的典型应用.我们看到最上层是WebBrowser的宿主(Host),也就是任何你想重用(ReUse)w ...

  8. linux tmp75 /dev/i2c-* 获取数据 demo

    /********************************************************************** * linux tmp75 /dev/i2c-* 获取数 ...

  9. Uva11732(trie)

    题意:给你n个字符串 用strcmp()两两比较 ,求字符比较的总次数 分析: 数据量很大我们考虑用孩子兄弟表示法来表示字典树 #include <cstdio> #include < ...

  10. REST API TESTING

    在敏捷开发过程中 每隔两周就是一个sprint,,, 在上个sprint中,任务就是REST API TESTING 因为以前没做过API 测试,不懂,然后经过询问查找 终于知道,需要发送请求,然后获 ...