javascript - 根据已知的条件重组li列表-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

javascript - 根据已知的条件重组li列表

怪我咯 2017-04-10 14:52:52

[JavaScript讨论组]

1071

根据后台传回来的li循环列表，如图1：

根据一直li属性判断重组新的层级列表

li代码如图2：

需求是根据li的cid判断比对全部li的uuid。

假如cid包含有uuid则该uuid的li则在cid的li下面，缩进margin-left：20px，当作为二级，依次类推，重组的二级里面的cid同样去比对所有uuid，cid包含有uuid则该uuid的li则在cid的li下面，缩进margin-left：40px，当作为三级，重组的三级里面的cid同样去比对所有uuid，cid包含有uuid则该uuid的li则在cid的li下面，缩进margin-left：60px，当作为四级，结束

怪我咯

走同样的路，发现不同的人生

全部回复(1)

ringa_lee2017-04-10 14:54:52 1楼

先枚举一遍uid，再枚举一遍cid。分级使用ul嵌套。

update 1
既然用了jq的标签那就jq吧……

js(function shenmegui($){
    var uids={}
    $('li').each(function(){
        var $this = $(this)
        uid = $this.attr('uid')
        uids[uid] = $this
    })
    $.each(uids, function(uid, $item){
        var cid = $item.attr('cid')
        if(cid){
            $.each(cid.split(','), function(){
               if(this && uids[this]){
                   append($item, uids[this])
                }
            })
        }
    })
    function append($p,$c){
        var ul = $('>ul', $p)
        if(ul.size() == 0) {
            ul = $('<ul>').appendTo($p)
        }
        ul.append($c)
    }
})(jQuery)

css控制嵌套缩进

cssul ul{
    margin-left:20px;
}

update 2
题主要求不做缩进，虽然不理解需求，但是……那么……我直接在上面代码的基础上再增加几句好了……

js(function shenmegui($){
    var uids={}
    $('#lbul li').each(function(){
        var $this = $(this)
        uid = $this.attr('uid')
        uids[uid] = $this
    })
    $.each(uids, function(uid, $item){
        var cid = $item.attr('cid')
        if(cid){
            $.each(cid.split(','), function(){
               if(this && uids[this]){
                   append($item, uids[this])
                }
            })
        }
    })
    $('#lbul li').each(function(){
        var $this = $(this)
        $this.css('marginLeft', 20*$this.parentsUntil('#lbul', 'li').size() + 'px' )
    })
    $('#lbul li').appendTo('#lbul')
    function append($p,$c){
        var ul = $('>ul', $p)
        if(ul.size() == 0) {
            ul = $('<ul>').appendTo($p)
        }
        ul.append($c)
    }
})(jQuery)

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>