Question

我有一个来自服务器的json（无法更改），我需要构建一个嵌套的无序列表菜单。

这是jsFiddle - 警告！需要很长时间才能运行，这只是样本数据 - 真正的东西要大得多。

不知何故，它变得搞砸了，我最终得到了多个不合适的东西，它需要永远运行。

守则：

$.each(jData, function (k, v) {
    var vendor = JSON.stringify(k);
    vendor = vendor.replace(/"/g, '');
    var vendorRow = '<li data-vendor="' + vendor + '" class="listItem v">' + vendor + '</li>';
    $('ul#vendors').append(vendorRow);
    $('ul#vendors li[data-vendor="'+vendor+'"]').append('<ul class="sub hide"/>');
    var getArea = _.groupBy(jData[vendor], 'area');
    $.each(getArea, function(k, v) {
        var area = JSON.stringify(k);
        area = area.replace(/"/g,'');
        var thisArea = '<li data-area="'+area+'" class="listItem a">'+area+'</li>';
        $('ul#vendors li[data-vendor="'+vendor+'"] ul.sub').append(thisArea);
        $('ul#vendors li[data-area="'+area+'"]').append('<ul class="sub hide"/>');
        var getRegion = _.groupBy(getArea[area], 'region');
        $.each(getRegion, function(k, v) {
            var region = JSON.stringify(k);
            region = region.replace(/"/g,'');
            var thisRegion = '<li data-region="'+region+'" class="listItem a">'+region+'</li>';
            $('ul#vendors li[data-area="'+area+'"] ul.sub').append(thisRegion);
            $('ul#vendors li[data-region="'+region+'"]').append('<ul class="sub hide"/>');
            var getMarket = _.groupBy(getRegion[region], 'market');
            $.each(getMarket, function(k, v) {
                var market = JSON.stringify(k);
                market = market.replace(/"/g,'');
                var thisMarket = '<li data-market="'+market+'" class="listItem m">'+market+'</li>';
                $('ul#vendors li[data-region="'+region+'"] ul.sub').append(thisMarket);
                $('ul#vendors li[data-market="'+market+'"]').append('<ul class="sub hide"/>');
                var getSwitch = _.groupBy(getMarket[market], 'switch');
                $.each(getSwitch, function(k, v) {
                    var vSwitch = JSON.stringify(k);
                    vSwitch = vSwitch.replace(/"/g,'');
                    var thisSwitch = '<li data-switch="'+vSwitch+'" class="listItem s">'+vSwitch+'</li>';
                    $('ul#vendors li[data-market="'+market+'"] ul.sub').append(thisSwitch);
                });
            });
        });
    });
});

示例输出：

<div id="chartWizard">
    <ul id="vendors">
        <li class="listItem v" data-vendor="levdore">
            levdore
            <ul class="sub hide">
                <li class="listItem a" data-area="Midwest">
                    Midwest
                    <ul class="sub hide">...</ul>
                    <ul class="sub hide">...</ul>
                    <ul class="sub hide">...</ul>
                </li>
            </ul>
        </li>
    </ul>
</div>

列表似乎在第二个ul.sub上分崩离析，其中有多个ul.sub元素，其中应该只有一个。

Answer 1

我真的认为重新编写代码以使用递归逻辑遍历对象是正确的方法。沿着这条线的某个地方，你的对象多次迭代，这就是为什么它需要很长时间来加载它。我重写了你的例子，这就是我想出的。你可以进一步解决它，使其更具可读性。

工作示例：http://jsfiddle.net/me6SM/9/

doRecursive(jData,null,$('ul#vendors'),0);

function doRecursive(grp,parent,selector,depth){
    $.each(grp, function(k,v) {
        var item = JSON.stringify(k).replace(/"/g,'');
        var element = ['area','region','market','switch'][depth];
        var thisSelector = 'data-' + element + '="'+item+'"';
        var thisItem = $('<li ' + thisSelector + ' class="listItem '+ (element ? element[0] : '') +'">'+item+'</li>');
        selector.append(thisItem);
        var childList = $('<ul class="sub hide"/>');
        thisItem.append(childList);
        if(!element){return;}
        var next = _.groupBy(grp[item], element );
        doRecursive(next,item, childList , depth + 1);
    });
}

建立级联列表的问题

1 个答案: