javascript - 使用json和jquery显示类别的多级子类别

Question

大家好，请找到以下关于通过 jquery 在多级子类别上解析 json 数据的代码。目前有 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/一个工作示例。