使用json和jquery显示一个类别的子类别

Question

大家好， 请在下面的代码中找到json数据解析throgh jquery多级别的子类别。 目前有3个子类别，我想要一个关于脚本的建议，我们如何使它能够显示子类别的动态脚本。

/**************************************************************/ 
/* Prepares the cv to be dynamically expandable/collapsible */ 
/**************************************************************/ 
function prepareList() { 
    $('#expList').find('li:has(ul)') 
    .click(function(event) { 
     if (this == event.target) { 
      $(this).toggleClass('expanded'); 
      $(this).children('ul').toggle('medium'); 
     } 
     return false; 
    }) 
    .addClass('collapsed') 
    .children('ul').hide(); 

    //Create the button funtionality 
    $('#expandList') 
    .unbind('click') 
    .click(function() { 
     $('.collapsed').addClass('expanded'); 
     $('.collapsed').children().show('medium'); 
    }) 
    $('#collapseList') 
    .unbind('click') 
    .click(function() { 
     $('.collapsed').removeClass('expanded'); 
     $('.collapsed').children().hide('medium'); 
    }) 

}; 


/**************************************************************/ 
/* Functions to execute on loading the document    */ 
/**************************************************************/ 
$(document).ready(function() { 

    var myJSONCategories ={"categories":[{"ic_id":"100002","ic_disp_val":"Campaigns","ic_sub":1,"ic_sub_categories":[{"ic_id":"100021","ic_disp_val":"Campaigns sub categorist","ic_sub":1,"ic_sub_categories":[{"ic_id":"100118","ic_disp_val":"camp 1","ic_sub":0},{"ic_id":"100119","ic_disp_val":"camp 2","ic_sub":0},{"ic_id":"100120","ic_disp_val":"camp 3","ic_sub":0}]}]},{"ic_id":"100002","ic_disp_val":"Products","ic_sub":1,"ic_sub_categories":[{"ic_id":"100021","ic_disp_val":"cxtest","ic_sub":1,"ic_sub_categories":[{"ic_id":"100118","ic_disp_val":"camp 1","ic_sub":0},{"ic_id":"100119","ic_disp_val":"camp 2","ic_sub":0},{"ic_id":"100120","ic_disp_val":"camp 3","ic_sub":0}]}]},{"ic_id":"100002","ic_disp_val":"Campaigns/Products","ic_sub":1,"ic_sub_categories":[{"ic_id":"100021","ic_disp_val":"cxtest","ic_sub":1,"ic_sub_categories":[{"ic_id":"100118","ic_disp_val":"camp 1","ic_sub":0},{"ic_id":"100119","ic_disp_val":"camp 2","ic_sub":0},{"ic_id":"100120","ic_disp_val":"camp 3","ic_sub":0}]}]}]}; 

    var htmlBuilder=''; 

    $.each(myJSONCategories.categories, function(inx, content) { 

      if(inx==0) 
      { 
        htmlBuilder +='<li>'+content.ic_disp_val; 
      }else{ 

        htmlBuilder +='<li>'+content.ic_disp_val; 
      } 

      if (content.ic_sub==1) 
      { 

          $.each(content.ic_sub_categories, function(inx1, cnt_sub1) 
          { 

           len1=content.ic_sub_categories.length-1; 

            if(inx1==0) 
            { 
             htmlBuilder += '<ul><li>'+cnt_sub1.ic_disp_val; 
            }else 
            { 
             htmlBuilder += '</li><li>'+cnt_sub1.ic_disp_val;            
            } 


           if (cnt_sub1.ic_sub==1) 
           { 
            $.each(cnt_sub1.ic_sub_categories, function(inx2, cnt_sub2) 
            { 

             len2=cnt_sub1.ic_sub_categories.length-1; 

             if(inx2==0) 
             { 
               htmlBuilder += '<ul><li>'+cnt_sub2.ic_disp_val; 
             }else 
             { 
               htmlBuilder += '</li><li>'+cnt_sub2.ic_disp_val;            
             } 

             if(inx2==len2) 
             { 
              htmlBuilder +='</li></ul>'; 
             }  


            }); 

           } 

           if(inx1==len1) 
           { 

            htmlBuilder +='</li></ul>'; 
           } 



          }); 



      } 

      htmlBuilder +='</li>'; //Categories End   


    }); 

    $("#expList").html(htmlBuilder); 
    prepareList(); 
}); 

HTML代码

<ul id="expList"> 


      </ul> 

Answer 1

一个递归函数能去n小类深！玩的开心。

obj = {"categories":[{"ic_id":"100002","ic_disp_val":"Campaigns","ic_sub":1,"ic_sub_categories":[{"ic_id":"100021","ic_disp_val":"Campaigns sub categorist","ic_sub":1,"ic_sub_categories":[{"ic_id":"100118","ic_disp_val":"camp 1","ic_sub":0},{"ic_id":"100119","ic_disp_val":"camp 2","ic_sub":0},{"ic_id":"100120","ic_disp_val":"camp 3","ic_sub":0}]}]},{"ic_id":"100002","ic_disp_val":"Products","ic_sub":1,"ic_sub_categories":[{"ic_id":"100021","ic_disp_val":"cxtest","ic_sub":1,"ic_sub_categories":[{"ic_id":"100118","ic_disp_val":"camp 1","ic_sub":0},{"ic_id":"100119","ic_disp_val":"camp 2","ic_sub":0},{"ic_id":"100120","ic_disp_val":"camp 3","ic_sub":0}]}]},{"ic_id":"100002","ic_disp_val":"Campaigns/Products","ic_sub":1,"ic_sub_categories":[{"ic_id":"100021","ic_disp_val":"cxtest","ic_sub":1,"ic_sub_categories":[{"ic_id":"100118","ic_disp_val":"camp 1","ic_sub":0},{"ic_id":"100119","ic_disp_val":"camp 2","ic_sub":0},{"ic_id":"100120","ic_disp_val":"camp 3","ic_sub":0}]}]}]}; 

function addCategories(obj) 
{ 
    htmlBuilder = ""; 
    for (var i = 0; i < obj.length;i++) 
    { 
     htmlBuilder +='<li>'+obj[i].ic_disp_val; 

     if (obj[i].ic_sub==1) 
     { 
      htmlBuilder +='<ul>'; 
      htmlBuilder += addCategories(obj[i].ic_sub_categories); 
      htmlBuilder +='</ul>'; 
     } 
     htmlBuilder +='</li>'; 
    } 

    return htmlBuilder; 
} 

document.getElementById("expList").innerHTML = addCategories(obj.categories); 
prepareList(); 

的工作示例，请参见本http://jsfiddle.net/uqgd07kp/3/。