纯JS实现无限极分类

<!DOCTYPE html>

<html>

<head>

    <title></title>
//引入Jquery

    <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>

    <style type="text/css">

        .one{

            background: red;

        }

        .two{

            background-color: green;

            margin-left: 30px;

        }

        .three{

            background-color: yellow;

            margin-left: 60px;

        }

        li{

            list-style: none;

            border: 1px red solid;

            margin-top:10px;

            width: 200px;

        }

    </style>

</head>

<body>

    <div id="add">

        <!-- <li class="one">上衣</li>

        <li class="two">男装</li>

        <li class="three">男西装</li> -->

    </div>

</body>

<script type="text/javascript">
//首先定义一个数组，分类是按照父级分类pid来判断的

    var arr=[

    {id:1,name:"上衣",pid:0},

    {id:2,name:"裤子",pid:0},

    {id:3,name:"鞋子",pid:0},

    {id:9,name:"电子",pid:0},

    {id:4,name:"男装",pid:1},

    {id:5,name:"男皮衣",pid:4},

    {id:6,name:"男西装",pid:4},

    {id:7,name:"休闲裤",pid:2},

    {id:8,name:"手机",pid:9},

    ]


//用的是3层foreach循环

arr.forEach(function(value, index, array) {

  // console.log(value.name+"-----"+index+"----"+array);

  if (value.pid==0) {

      // console.log(value.name);
　　　　//如果是顶级分类的话，就用class=one的li标签

      var one="<li class='one'>"+value.name+"</li>";

      $("#add").append(one);

          arr.forEach(function(value1,index1){

                      if(value1.pid==value.id){
　　　　　　　　　　　　//如果是二级分类,就用class=two 的li标签

                                  var two="<li class='two'>"+value1.name+"</li>";

                              $("#add").append(two);

                          arr.forEach(function(value2,index2){

                              if(value2.pid==value1.id){
　　　　　　　　　　　　//如果是三级分类,就用class=three的li标签

                                      var three="<li class='three'>"+value2.name+"</li>";

                              $("#add").append(three);

                              }

                          })

                      }

          })

  }

});

</script>

</html>

无限极分类的JS实现的更多相关文章

  1. js实现无限极分类

    转载注明出处!!! 转载注明出处!!! 转载注明出处!!! 因为要实现部门通讯录,后台传来的数据是直接从数据库里拿的部门表,所以没有层级分类,只有parentId表示从属关系,所以分类的事情就交给我来 ...

  2. thinkphp5.0无限极分类及格式化输出

    首先我们来看数据表 从上图中可以发现,中国下有贵州,北京两个子节点,而北京有天安门一个子节点,纽约的子节点是"纽约的子类". 从pid为0看出,中国和纽约是顶级节点. 因为贵州的p ...

  3. sqlalchemy tree 树形分类 无限极分类的管理。预排序树，左右值树。sqlalchemy-mptt

    简介: 无限极分类是一种比较常见的数据格式,生成组织结构,生成商品分类信息,权限管理当中的细节权限设置,都离不开无限极分类的管理. 常见的有链表式,即有一个Pid指向上级的ID,以此来设置结构.写的时 ...

  4. PHP 商城无限极分类

    无限极分类,用的是递归,在外部调用fen()方法即可 index是刚开始寻找的顶级分类,suo是为了在前端展示的时候缩进 ,$suo=){ 一个数组用来返回的 $t=[]; 这是查询数据库的所有内容 ...

  5. php无限极分类以及递归(thinkphp)

    php无限极分类: 无限极分类重点在于表的设计: 1在model中: class CatModel extends Model{ protected $cat = array(); public fu ...

  6. C#无限极分类树-创建-排序-读取 用Asp.Net Core+EF实现之方法二：加入缓存机制

    在上一篇文章中我用递归方法实现了管理菜单,在上一节我也提到要考虑用缓存,也算是学习一下.Net Core的缓存机制. 关于.Net Core的缓存,官方有三种实现: 1.In Memory Cachi ...

  7. PHP无限极分类

      当你学习php无限极分类的时候,大家都觉得一个字“难”我也觉得很难,所以,现在都还在看,因为工作要用到,所以,就必须得研究研究. 到网上一搜php无限极分类,很多,但好多都是一个,并且,写的很乱, ...

  8. PHP无限极分类，多种方法|很简单，这里说的很详细，其它地方说的很不好懂

    当你学习php无限极分类的时候,大家都觉得一个字"难"我也觉得很难,所以,现在都还在看,因为工作要用到,所以,就必须得研究研究.   到网上一搜php无限极分类,很多,但好多都是一 ...

  9. C#无限极分类树-创建-排序-读取 用Asp.Net Core+EF实现

    今天做一个管理后台菜单,想着要用无限极分类,记得园子里还是什么地方见过这种写法,可今天找了半天也没找到,没办法静下心来自己写了: 首先创建节点类(我给它取名:AdminUserTree): /// & ...

随机推荐

  1. Python解析excel文件并存入sqlite数据库

    最近由于工作上的需求 需要使用Python解析excel文件并存入sqlite 就此做个总结 功能:1.数据库设计 建立数据库2.Python解析excel文件3.Python读取文件名并解析4.将解 ...

  2. [QT][待解决问题]对话框ui载入卡顿问题

    电脑运行环境:win7 + qt-opensource-windows-x86-mingw530-5.8.0源码是 < Qt快速入门系列教程目录 > 第3篇 Qt5基础(三)Qt登录对话框 ...

  3. linux C使用strerror来追查错误信息

    最近工作中有个需求:程序将文件进行处理,然后将处理完毕的文件挪走.我用了rename函数来挪动文件,可是在docker化的环境中,文件却无法挪动.不知道什么原因.现在,对程序进行调整,如果rename ...

  4. HihoCoder1621 : 超市规划（四边形DP优化）（）

    超市规划 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 小Hi居住的城市的中轴线恰好是一条马路.沿着这条马路一共坐落有N个居民小区,其中第i个小区距离马路一端的距离是A ...

  5. 洛谷P1306 斐波那契公约数

    题目描述 对于Fibonacci数列:1,1,2,3,5,8,13......大家应该很熟悉吧~~~但是现在有一个很“简单”问题:第n项和第m项的最大公约数是多少? 输入输出格式 输入格式: 两个正整 ...

  6. angular中的 input select 值绑定无效，以及多出一个空白选项问题

    问题: <!-- 问题标签 --> <select ng-model="sortType"> <option value="1"& ...

  7. 自定义标签2.x

    2.x只需要继承SimpleTagSupport 1.x 输出流  JspWriter out = pageContext.getOut(); 2.x 输出流  JspWriter out = get ...

  8. Android中内容观察者的使用---- ContentObserver类详解 （转）

    前言: 工作中,需要开启一个线程大量的查询某个数据库值发送了变化,导致的开销很大,后来在老大的指点下,利用了 ContentObserver完美的解决了该问题,感到很兴奋,做完之后自己也对Conten ...

  9. BufferedInputStream与BufferedOutputStream

    BufferedInputStream是带缓冲区的输入流,默认缓冲区大小是8M,能够减少访问磁盘的次数,提高文件读取性能:BufferedOutputStream是带缓冲区的输出流,能够提高文件的写入 ...

  10. Python学习之变量的作用域

    学习地址:http://www.jianshu.com/p/17a9d8584530 1.变量作用域LEGB 1.1变量的作用域 在Python程序中创建.改变.查找变量名时,都是在一个保存变量名的空 ...