纯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. 11.求二元查找树的镜像[MirrorOfBST]

    [题目] 输入一颗二元查找树,将该树转换为它的镜像,即在转换后的二元查找树中,左子树的结点都大于右子树的结点.用递归和循环两种方法完成树的镜像转换. 例如输入: 8    /  \  6      1 ...

  2. static才是对代码的提升

    static才是对代码的提升 static的作用有如下三条: 1):隐藏. 当编译多个文件时,所有未加static前缀的全局变量和函数都具有全局可见性. 一个是a.c,另一个是main.c. 下面是a ...

  3. 剑指Offer面试题：12.链表的倒数第K个结点

    一 题目:链表的倒数第K个结点 题目:输入一个链表,输出该链表中倒数第k个结点.为了符合大多数人的习惯,本题从1开始计数,即链表的尾结点是倒数第1个结点.例如一个链表有6个结点,从头结点开始它们的值依 ...

  4. 1.2 java web的发展历史

    前言 了解java web的发展历史和相关技术的演进历程,非常有助于加深对java web技术的理解和认识. 阅读目录 1.Servlet的出现 2.Jsp的出现 3.倡导了MVC思想的Servlet ...

  5. Python 函数 -next()

    next() next() 返回迭代器的下一个项目. iterator - 可迭代对象.  default - 可选,用于设置在没有下一个元素时返回该默认值,如果不设置,又没有下一个元素则会触发 St ...

  6. numpy之统计函数和布尔数组方法

    统计函数 可以通过numpy的统计函数对整个数组或者某个轴向的数据进项统计计算. 所谓的轴向,其实就是n维向量的某一维.或者说某一行,某一列. sum对数组(向量)中全部或某个轴向的元素求和,长度为0 ...

  7. 10 Things ASP.NET Developers Should Know About Web.config Inheritance and Overrides(转)

    10 Things ASP.NET Developers Should Know About Web.config Inheritance and Overrides Wednesday, Janua ...

  8. ubuntu14.04安装pyspider

    sudo apt-get install libcurl4-openssl-dev libxml2-dev libxslt1-dev sudo atp-get install phantomjs 激活 ...

  9. 用 Python 实现文件查找

    用 Python 实现文件查找(BIF实现及队列实现) (1)利用内置函数实现文件查找 1.功能:返回用户输入的文件的绝对路径 2.设计思路: (1)用户输入在哪个盘进行查找 (2)遍历此盘文件,若为 ...

  10. go基本数据类型与运算符

    GO基本类型1.布尔(bool) 长度:1字节 取值范围:true,false 注意事项:不可用数字代表true或false2.整型(int/uint) 根据平台 肯能为32位或64位3. 8位整型: ...