构建级联列表的问题

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); 
    }); 
}