javascript - 根据已知的条件重组li列表-PHP Chinese Network Q&A

Article Topic Learning Download Q&A Programming Dictionary Game Recent Updates

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW)

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

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

585

根据后台传回来的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，当作为四级，结束

怪我咯

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

reply all(1)

左手右手慢动作2017-04-10 14:54:52 1 floor

先枚举一遍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 = $('').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 = $('').appendTo($p)
        }
        ul.append($c)
    }
})(jQuery)