纯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. BZOJ - 3196 Tyvj 1730 二逼平衡树 (线段树套treap)

    题目链接 区间线段树套treap,空间复杂度$O(nlogn)$,时间复杂度除了查询区间k大是$O(log^3n)$以外都是$O(log^2n)$的. (据说线段树套线段树.树状数组套线段树也能过?) ...

  2. BZOJ - 1941 Hide and Seek (kd树)

    题目链接 kd树模板题,求二维空间上的最远点/最近点. 对所有点建立kd树,分别查询每个点即可.单次查询期望时间复杂度$O(logn)$ #include<bits/stdc++.h> u ...

  3. gulp 集成其他基于流的工具

    1. 流.缓冲.vinyl 文件对象 gulp 的流是虚拟文件对象 包含的属性有 base 文件名 path 文件路径 content 缓冲.nodejs 流 2. gulp 集成 browserif ...

  4. 2018年总结和2019年的Flag

    ---恢复内容开始--- 目前截止到现在工作将近一年半了,今天工作上主要后端主要是用了两种语言,java和Python(2.7),今年完成主要的工作主要使用Python在写一些脚本来满足财务和人资部门 ...

  5. 容器中跨主机的网络方案-Weave

    容器中的网络是建立docker集群的重要内容. 本文将介绍如何用Weave实现容器的多节点互通. Weave是一个开源的项目,其网站为: https://www.weave.works/ 其工作原理相 ...

  6. yii2 csrf验证原理分析

    知识补充 因为yii2 csrf的验证的加解密 涉及到异或运算 所以需要先补充php里字符串异或运算的相关知识,不需要的可以跳过 ^异或运算不一样返回1 否者返回 0在PHP语言中,经常用来做加密的运 ...

  7. 【转】Jmeter Http请求界面解释

    一个HTTP请求有着许多的配置参数,下面将详细介绍: 名称:本属性用于标识一个取样器,建议使用一个有意义的名称. 注释:对于测试没有任何作用,仅用户记录用户可读的注释信息. 服务器名称或IP :HTT ...

  8. mina2中IoHandler

    IoHandler 当我们通过IoSession执行相关操作的时候,如写数据,这些事件会触发Mina框架抽象的IoService实例,从而调用Mina框架底层的相关组件进行处理.这时,配置的IoHan ...

  9. thinkphp中配置信息的二维数组设置与使用

    有时候配置信息是二维数组 1.配置 <?php return array ( // 阿里大鱼短信配置 'dayu_appkey'=>'xxx', 'dayu_secretKey'=> ...

  10. SDRAM 之时序收敛（学习了特权老师）

    到现在我还是不太理解SDRAM的时序设置,但是可能蒙对了.(呵呵) 开发环境: quartus II 13.0   板子: DE2 EP2C35F672C6N 时序约束step 1:create cl ...