js向ul标签动态添加li并且li标签有修改删除按钮+js中添加颜色css样式（使用layui下拉）【清空指定容器下的元素、遍历数据向指定容器添加元素】

 

js向ul标签添加li并且li标签有修改删除按钮

一、实现一：Ul中的li中文本和按钮使用div布局、并在拼接li时给每个li添加了onclick事件

 var $li = "<li class='layui-menu-item-divider' id='li" + (index + 1) + "'><div class='lidiv'><div class='lia'><a class='lianame' id='a" + id + "' onclick=getplayItem('" + id + "','" + name + "')>" + name + "</a></div><div class='aul'><a class= 'updnote' onclick =updplayList('" + id + "','" + name + "')> <i class='us-icon'>&#xe68f;</i></a ><a class='deltnote' onclick=delplayList('" + id + "','" + name + "')><i class='us-icon''>&#xe6a5;</i></a></div></div></li>";
实现一的li拼接串样式

Layui当中的导航条动态添加

效果：

1、html放置ul标签

<ul class="layui-nav" id="nav" layui-filter="test"></ul>/

2、js编写代码动态添加li

<script type="text/javascript">
     function playlistustree() {
        var url = "/extavs/Avs_Call/getplayList";
　　　　 //调用api获取数据
        ushttp.UsAjaxJSONV2(url, "", false, false, function (d) {
            console.error(d);
            if (d.code == 0) {
                //$("#nav").find('span.layui-nav-bar').remove();
                var da = d.results.data;
                //遍历数据动态添加li
                $.each(da, function (index, value) {
                    var name = da[index]['name'];
                    var id = da[index]['id'];
                     var $li = "<li class='layui-menu-item-divider' id='l" + id + "'><div class='li'><div class='lia'><a class='lianame' id='a" + id + "' onclick=getplayItem('" + id + "')>" + name + "</a></div><div class='aul'><a class= 'updnote' onclick =updplayList('" + id + "','" + name + "')> <i class='us-icon'  style='color:#1e9fff'>&#xe68f;</i></a ><a class='deltnote' onclick=delplayList('" + id + "','" + name + "')><i class='us-icon' style='color:rgb(245, 108, 108)'>&#xe6a5;</i></a></div></div></li>";
                    $("#nav").append($li);
                })
                //列表添加完后再次执行渲染
                xuanran();
            }
            else {
                usbasic.errorMsg(d.msg);
            }
        });
    }
</script>
 function xuanran() {
        layui.use('element', function () {
            var element = layui.element;
            var layFilter = $("#nav").attr('lay-filter');
            element.render('nav', layFilter);
        })
    }

3、css样式

<style>
    //ul盒子样式
    .layui-nav {
        position: relative;
        padding: 0px 0px 0px 0px;
        margin-top: 10px;
        height: 250px;
        /* background-color: #393D49; */
        color: #fff;
        border-radius: 2px;
        font-size: 0;
        box-sizing: border-box;
    }
        //修改删除按钮右侧浮动
        .layui-nav .aul {
            float: right;
        }
       //列表名左侧浮动
        .layui-nav .lia {
            width: 60%;
            float: left;
        }

        .layui-nav .aul .updnote {
            margin-right: 10px;
        }

        .layui-nav .layui-menu-item-divider {
            margin: 10px 0px 0px 10px;
            height: 20px;
        }
    //添加滚动条
    .ldiv3 .playlistusul {
        height: 250px;
        /*overflow-y: overlay;*/
        /*overflow-y: hidden;*/
        overflow: auto;
    }
</style>
CSS

4、点击对应列表名、名变色

(li的onclick点击事件中对标签名设置样式 ，根据id获取点击li设置为蓝色，提前通过类获取标签将全部li设置为黑色)

  $(".lianame").css("color", "black");
        $("#a" + id).css("color", "#1e9fff");

变色效果：

二、实现二：Ul的li中文本和按钮使用span布局、然后给li添加点击事件，  推荐使用这种方式

    (不需要上面那种方式给每个li加onclick事件)

 var $li = "<li class='layui-menu-item-divider' id='li" + (index + 1) + "'><span class='lia'><a class='lianame' id='a" + (index + 1) + "' data-url='" + id + "," + name + "'>" + name + "</a></span><span class='aul'><a id='updnote" + (index + 1) + "' class= 'updnote' data-url='" + id + "," + name + "'> <i class='us-icon'>&#xe68f;</i></a ><a id='deltnote" + (index + 1) + "' class='deltnote' data-url='" + id + "," + name + "'><i class='us-icon''>&#xe6a5;</i></a></span></li>";
实现2的li拼接串的样式

编写 js代码

1、和实现一一样添加ul标签

  <div class="playlistusul">
     <ul class="layui-nav" id="nav" layui-filter="test"></ul>
  </div>

 

2、通过ajax等方式获取ul的数据

3、获取到ul的数据，对数据进行遍历拼接li，然后添加到ul、添加成功后循环ul元素使用addEventListener添加li点击事件

//媒体分类列表显示
function playlistustree() {
    var url = "/extavs/Avs_Call/getplayList";
    ushttp.UsAjaxJSONV2(url, "", false, false, function (d) {
        //console.error(d);
        if (d.code == 0) {
            //$("#nav").find('span.layui-nav-bar').remove();
            var da = d.results.data;//取到ul数据
            $("#nav").find("li").remove();//清除ul中的全部li，因为业务逻辑可能会重复
            if (d.results.data.length > 0) {
               //遍历数据拼接li 向ul中添加li，拼接串中想传值用来点击使用，用一个新的属性存值(例如下面的data-url就是保存的点击时需要的值)
                $.each(da, function (index, value) {
                    var name = da[index]['name'];
                    var id = da[index]['id'];

                    var $li = "<li class='layui-menu-item-divider' id='li" + (index + 1) + "'><span class='lia'><a class='lianame' id='a" + (index + 1) + "' data-url='" + id + "," + name + "'>" + name + "</a></span><span class='aul'><a id='updnote" + (index + 1) + "' class= 'updnote' data-url='" + id + "," + name + "'> <i class='us-icon'>&#xe68f;</i></a ><a id='deltnote" + (index + 1) + "' class='deltnote' data-url='" + id + "," + name + "'><i class='us-icon''>&#xe6a5;</i></a></span></li>";
                    $("#nav").append($li);

                })
                ////遍历数据生成ul后 遍历ul的li 添加鼠标点击事件         
                for (var i = 0; i < $("#nav").find("li").length; i++) {
                    $("#nav").find("li")[i].addEventListener("click", function (e) {
                           //点击对应li添加css样式
                           //1.遍历所有的li，使其class属性默认的class
                        for (var j = 0; j < $("#nav").find("li").length; j++) {
                            var classVal = $("#nav").find("li")[j].setAttribute("class", "layui-menu-item-divider");
                        }
                        //2.获取当前点击li的index
                        var i = $(this).index();
                        //3.获取点击li的原有class属性
                        var classVal = $("#nav").find("li")[i - 1].getAttribute("class");
                        //4.对当前的class属性拼接一个其他clss（设置点击后的样式）
                        classVal = classVal.concat(" li_style");
                        //5.将新的class设置给点击的li
                        $("#nav").find("li")[i - 1].setAttribute("class", classVal);
                        //6.获取li标签内自己设定的属性里面的值
                        var urlarr = document.getElementsByClassName("lianame")[i - 1].getAttribute("data-url").split(',');
                        //7.传入逻辑方法中
                        getplayItem(urlarr[0], urlarr[1]);

                    }, false);
                    //修改按钮点击事件
                    $("#nav").find(".updnote")[i].addEventListener("click", function (e) {
                        var updid = $(this).attr('id');
                        var urlarr = document.getElementById(updid).getAttribute("data-url").split(',');
                        updplayList(urlarr[0], urlarr[1]);

                    }, false);
                    //删除按钮点击事件
                    $("#nav").find(".deltnote")[i].addEventListener("click", function (e) {
                        var updid = $(this).attr('id');
                        var urlarr = document.getElementById(updid).getAttribute("data-url").split(',');
                        delplayList(urlarr[0], urlarr[1]);

                    }, false);

                }
                //列表添加完后再次执行渲染
                xuanran(da[0]['id'], da[0]['name']);
            }
        }
        else {
            usbasic.errorMsg(d.msg);
        }
    });
}
/**
 * 
 * @param {any} 分类列表id
 * @param {any} 分类列表name
 */
function xuanran(l, n) {
    layui.use('element', function () {
        var element = layui.element;
        var layFilter = $("#nav").attr('lay-filter');
        element.render('nav', layFilter);
    });
    if (l != "") {
        //初始页面第一个li点击事件
        $("#nav").find("li")[0].click();
        //getplayItem(l, n);
    }
}

4、ul的CSS样式

/*ul的div盒子*/
.ldiv3 .playlistusul {
    height: 250px;
    /*max-height:250px;*/
    /*overflow-y: overlay;*/
    /*overflow-y: hidden;*/
    overflow-y: auto;
    /*overflow-y: overlay;*/
    width: 100%;
}
/*ul盒子*/
.layui-nav {
    position: relative;
    padding: 0px 0px 0px 0px;
    margin-top: 10px;
    /*height: 250px;*/
    /* background-color: #393D49; */
    color: #fff;
    border-radius: 2px;
    font-size: 0;
    box-sizing: border-box;
}
/*li标签*/
.layui-nav .layui-menu-item-divider {
        /* margin: 10px 0px 0px 10px;
        height: 20px;*/
        margin: 0px 0px 0px 10px;
        height: 30px;
        line-height: 30px;
        padding: 3px;
}
   /*左侧文本span标签*/
    .layui-nav .lia {
        width: 70%;
        float: left;
        height: 25px;
    }
  /*左侧文本span中a标签*/
        .layui-nav .lia .lianame {
            position: absolute;
            z-index: 5;
            width: 75%;
        }
 /*右侧按钮span标签*/
    .layui-nav .aul {
        float: right;
        height: 25px;
        width: 20%
    }
/*右侧span中的修改按钮*/
    .layui-nav .aul .updnote {
        position: absolute;
        z-index: 5;
        /*margin-left:5px;*/
    }
/*右侧span中的修改按钮*/
.layui-nav .aul .deltnote {
    position: absolute;
    z-index: 5;
    margin-left: 20px;
}
/*li光标放上有深灰色显示*/
#nav li:hover {
    background-color: rgb(78,84,101);
}
/*点击li后添加的样式 背景灰色 左侧有4px边框*/
.li_style {
    background-color: #EEEEEE !important;
    border-left: solid 4px #009688;
}
CSS 

最终效果：

三、js添加、清除ul下的li   

清空指定容器下的元素、遍历数据向指定容器添加元素

(7条消息) ul中清除所有的li标签_大海无量波涛凶的博客-CSDN博客_ul清空li

    var da = d.results.data;
            $("#nav").find("li").remove();//清空指定容器下的全部li
            if (d.results.data.length > 0) {
                $.each(da, function (index, value) {
                    var name = da[index]['name'];
                    var id = da[index]['id'];                
                    var $li = "<li class='layui-menu-item-divider' id='l" + id + "'><div class='li'><div class='lia'><a class='lianame' id='a" + id + "' onclick=getplayItem('" + id + "','" + name + "')>" + name + "</a></div><div class='aul'><a class= 'updnote' onclick =updplayList('" + id + "','" + name + "')> <i class='us-icon'  style='color:#1e9fff'>&#xe68f;</i></a ><a class='deltnote' onclick=delplayList('" + id + "','" + name + "')><i class='us-icon' style='color:rgb(245, 108, 108)'>&#xe6a5;</i></a></div></div></li>";
                    $("#nav").append($li);//遍历数据向指定容器添加元素
                })
                //列表添加完后再次执行渲染
                xuanran(da[0]['id'], da[0]['name']);
            }

 

 

posted @ 2022-12-03 10:20  じ逐梦  阅读(3507)  评论(0)  编辑  收藏  举报