纯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. 正则化项L1和L2的区别

    https://blog.csdn.net/jinping_shi/article/details/52433975 https://blog.csdn.net/zouxy09/article/det ...

  2. 我们为什么选择JAVA

    我们为什么选择Java 大多数人选择Java可能只是因为听说Java前景好.Java比较好找工作.Java语言在TIOBE排行榜上一直位于前三等等之类的原因,但是Java具体好在哪里,心里却是没有什么 ...

  3. linux之使用samba实现文件共享

    早期网络想要在不同主机之间共享文件大多要用FTP协议来传输,但FTP协议仅能做到传输文件却不能直接修改对方主机的资料数据,这样确实不太方便,于是便出现了NFS开源文件共享程序,NFS是一个能够将多台L ...

  4. niosii boot过程

    1 概述Nios II 的boot过程要经历两个过程. FPGA器件本身的配置过程.FPGA器件在外部配置控制器或自身携带的配置控制器的控制下配置FPGA的内部逻辑.如果内部逻辑中使用了Nios II ...

  5. 【java规则引擎】java规则引擎搭建开发环境

    Drools官网:http://www.jboss.org/drools Drools and jBPM consist out of several projects:(Drools软件包提供的几个 ...

  6. test20181219 奇怪的函数

    题意 奇怪的函数 [问题描述] 使得x^x达到或超过n位数字的最小正整数x是多少? [文件输入] 输入一个正整数n(n<=2*10^9). [文件输出] 输出使得x^x达到n位数字的最小正整数x ...

  7. fn project 试用之后的几个问题的解答

    今天试用fnproject  之后自己有些思考,后面继续解决   1. 目前测试是强依赖 dockerhub 的,实际可能不是很方便 2. 如何与k8s .mesos.docker swarm  集成 ...

  8. Notepad++如何取消打开最近的历史文件

    1.设置 2.首选项 3.备份 4.取消勾选 "Remember current session for next launch" 5.重新启动即可. 出处:http://www. ...

  9. elasticsearch pinyin 拼音分词器

    安装pinyin分词 地址:https://github.com/medcl/elasticsearch-analysis-pinyin PUT py_test { "index" ...

  10. Elasticsearch5.6安装

    Elasticsearch5.6安装 1.下载 5.6.8 sudo curl -L -O https://artifacts.elastic.co/downloads/elasticsearch/e ...