首页 > 根据已知的条件重组li列表

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

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


先枚举一遍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)
【热门文章】
【热门文章】