纯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. OpenCV中阈值（threshold）函数： threshold 。

    OpenCV中提供了阈值(threshold)函数: threshold . 这个函数有5种阈值化类型,在接下来的章节中将会具体介绍. 为了解释阈值分割的过程,我们来看一个简单有关像素灰度的图片,该图 ...

  2. C++ 资源管理 —— RAII

    RAII:在构造函数中申请资源,在析构函数中释放资源. 1. RAII 自动实现锁资源的释放 void bad() { m.lock(); f(); if (COND) return; m.unloc ...

  3. BigDecimal的用法

    一.简介 Java在java.math包中提供的API类BigDecimal,用来对超过16位有效位的数进行精确的运算.双精度浮点型变量double可以处理16位有效数.在实际应用中,需要对更大或者更 ...

  4. 对Tornado异步操作Sqlalchemy方法的选定 不错

    使用原因 在一个实时通讯的项目中,由于需要使用Websocket这一协议,便在Python框架中选定了Tornado,也同时使用了Sqlalchemy这一ORM框架. 大家都知道Tornado有异步非 ...

  5. 最全的Javascript编码规范(推荐)

    1.嵌入规则 Javascript程序应该尽量放在.js的文件中,需要调用的时候在页面中以<script src="filename.js">的形式包含进来.Javas ...

  6. Pycharm简单使用教程

    转自https://blog.csdn.net/qq_40130759/article/details/79421242 1.下载pycharm pycharm是一种Python IDE,能够帮助我们 ...

  7. ①SpringCloud前序知识-CAP原则

    本文主要介绍SpringCloud里头一些常见的原理.定理等相关SpringCloud的技术知识 一.CAP原则 CAP原则又称CAP定理,指的是在一个分布式系统中,Consistency(一致性). ...

  8. lvs之 lvs+nginx+tomcat_1、tomcat_2+redis（lvs dr 模式）

    前提:已经安装好 lvs+nginx+tomcat_1.tomcat_2+redis环境 ,可参考 (略有改动,比如tomcat_1.tomcat_2安装在两台机器上,而不是单机多实例 ,自行稍稍变动 ...

  9. maven help:system

    lifecycle:http://maven.apache.org/guides/introduction/introduction-to-the-lifecycle.html bindings:ht ...

  10. git常用命令小结

    1.ssh连接方式 公钥生成ssh-keygen -t rsa -C "764432054@qq.com"在用户家目录下的.ssh目录下生成 id_rsa ,id_rsa.pub ...