Question

0 0

根据已知的条件重组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 ，当作为四级，结束

jquery 前端 web前端开发 JavaScript

10 years, 2 months ago

silvia

share

silvia 10 years, 2 months ago

Answer 1

0

先枚举一遍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控制嵌套缩进


 css


 ul 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)

answered 10 years, 2 months ago

甩啊甩泥巴

share

甩啊甩泥巴 answered 10 years, 2 months ago

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

silvia

Answers

甩啊甩泥巴

Your Answer