Wie schreibe ich jquery plugin, um verwandte Unterkategorien anzuzeigen?

Question

Ich habe ein Problem in Hauptkategorie angezeigt wird, gefolgt von der dann gefolgt Unterkategorie nach Kategorien wie diese sub:

Hauptkategorie
Unterkategorie
Unterunterkategorie
Hauptkategorie
Unterkategorie
Unterunter Kategorie

Aber nun zeigt es wie folgt auf:

Hauptkategorie
Hauptkategorie

Unterkategorie
Vorkategorie

Unterunterkategorie
Unterunterkategorie

Hier ist mein Skript für Plugin:

(function($){ 

$.fn.selection = function(options) 
{ 
    var localThis = this; 
    //var main = ['Arriving Soon']; 
    var main = {'cat1':'a','cat2':'b','cat3':'c'}; 
    var divs; 
    var sub; 
    if(options){$.extend(main, options);} 

    jQuery.each(main, function(index,value){ 
     //alert("value = "+index); 
     divs = jQuery('<div />',{ 
      'text':index, 
      'css':({ 
      'background-color':'yellow', 
      'width':'100px', 
      'height':'50px', 
      'margin':'10px'})  
     }) .bind('click'); 
     jQuery.each(value, function(index2,value2){ 
      //alert(index2+" = "+value2); 

     $(function(){ 
      sub = jQuery('<div />',{ 
      'text':index2+" [remove]", 
      'css':({ 
      'background-color':'green', 
      'width':'100px', 
      'height':'50px', 
      'margin':'10px'}) 
      }); 
      localThis.append(sub); 
     }).bind('click',function() 
     { 
      sub2 = jQuery('<div />',{ 
      'text':value2+" [remove]", 
      'css':({ 
      'background-color':'grey', 
      'width':'100px', 
      'height':'50px', 
      'margin':'10px'}) 
      }); 
      localThis.append(sub2); 
     }); 

     localThis.append(divs); 


     });//inner loop 

    }); 

}; 
})(jQuery); 

Script, die Verwendung machen/Aufruf des Plugins:

$(function() 
{ 
    var a = []; 
    a['cat1'] = {'test1':["sub1","sub2"],'test2':["sub3","sub4"]}; 
    a['cat2'] = {'test3':["sub5","sub6"],'test4':["sub7","sub8"]}; 
    a['cat3'] = {'test5':["sub9","sub10"],'test6':["sub11","sub12"]}; 
    $('div#main').selection(a); 
}); 

HTML

<div id="main"> 

</div> 

Answer 1

JS

(function($){ 
 

 
$.fn.selection = function(options) 
 
{ 
 
    var localThis = this; 
 
    //var main = ['Arriving Soon']; 
 
    var main = {'cat1':'a','cat2':'b','cat3':'c'}; 
 
    var divs; 
 
    var sub; 
 
    if(options){$.extend(main, options);} 
 

 
    jQuery.each(main, function(index,value){ 
 
     //alert("value = "+index); 
 
     divs = jQuery('<div />',{ 
 
      'text':index, 
 
      'css':({ 
 
      'background-color':'yellow', 
 
      'width':'100px', 
 
      'height':'50px', 
 
      'margin':'10px'})  
 
     }).bind('click'); 
 
     localThis.append(divs); 
 
     jQuery.each(value, function(index1, value1){ 
 
     sub = jQuery('<div />',{ 
 
      'text':index1+" [remove]", 
 
      'css':({ 
 
      'background-color':'green', 
 
      'width':'100px', 
 
      'height':'50px', 
 
      'margin':'10px'}) 
 
      }); 
 
      localThis.append(sub); 
 
     jQuery.each(value1,function(index2,value2){ 
 
      sub = jQuery('<div />',{ 
 
      'text':value2+" [remove]", 
 
      'css':({ 
 
      'background-color':'grey', 
 
      'width':'100px', 
 
      'height':'50px', 
 
      'margin':'10px'}) 
 
      }); 
 
      localThis.append(sub); 
 
     }); 
 
     }); 
 
    }); 
 
}; 
 
})(jQuery); 
 

 

 
$(function() 
 
{ 
 
    var a = {}; 
 
    a.cat1 = {'test1':["sub1","sub2"],'test2':["sub3","sub4"]}; 
 
    a.cat2 = {'test3':["sub5","sub6"],'test4':["sub7","sub8"]}; 
 
    a.cat3 = {'test5':["sub9","sub10"],'test6':["sub11","sub12"]}; 
 
    $('div#main').selection(a); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="main"> 
 

 
</div>