構建級聯列表的問題

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