Looping Through a Array с jQuery

Question

У меня возник вопрос о создании пользовательских списков с удобной поддержкой пользователя.

У меня есть следующий пример:

var unitA = []; 
unitA[0] = "Unit A One"; 
unitA[1] = "Unit A Two"; 
unitA[2] = "Unit A Three"; 

var unitB = []; 
unitB[0] = "Unit B One"; 
unitB[1] = "Unit B Two"; 
unitB[2] = "Unit B Three"; 

var level = []; 
level[0] = "Level 1"; 
level[1] = "Level 2"; 
level[2] = "Level 3"; 

var skill = []; 
skill[0] = "This has Skill 1"; 
skill[1] = "This has Skill 2"; 
skill[2] = "This has Skill 3"; 
skill[3] = "This has Skill 4"; 

$('<div class="units"></div>').appendTo('body'); 

var unit = []; 
$.each(unitA, function(index, value) {unit.push('<div class="unitA-'+index+' u">'+value+'</div>');}); 
$.each(unitB, function(index, value) {unit.push('<div class="unitB-'+index+' u">'+value+'</div>');}); 
$(".units").html(unit.join("")); 

Код выше будет цикл через Unità и unitB и выходных данных HTML тела в DIV.

Unit A One 
Unit A Two 
Unit A Three 
Unit B One 
Unit B Two 
Unit B Three 

После того как я это сделать:

$(".unitA-0").append(
       '<ul>'+level[0]+'<li>'+skill[0]+'</li><li>'+skill[1]+'</li><li>'+skill[2]+'</li><li>'+skill[3]+'</li></ul>', 
       '<ul>'+level[1]+'<li>'+skill[0]+'</li><li>'+skill[1]+'</li><li>'+skill[2]+'</li><li>'+skill[3]+'</li></ul>' 
       ); 

$(".unitA-1").append(
       '<ul>'+level[0]+'<li>'+skill[0]+'</li><li>'+skill[1]+'</li></ul>', 
       '<ul>'+level[1]+'<li>'+skill[1]+'</li></ul>', 
       '<ul>'+level[2]+'<li>'+skill[0]+'</li><li>'+skill[1]+'</li><li>'+skill[2]+'</li><li>'+skill[3]+'</li></ul>' 
       ); 

Это было выходных данных, как:

Unit A One 
> Level 1 > Skill 1/Skill 2/Skill 3/Skill 4 
> Level 2 > Skill 1/Skill 2/Skill 3/Skill 4 
Unit A Two 
> Level 1 > Skill 1/Skill 2 
> Level 2 > Skill 2 
> Level 3 > Skill 1/Skill 2/Skill 3/Skill 4 
Unit A Three 
Unit B One 
Unit B Two 
Unit B Three 

Моя цель состоит в том, чтобы создать удобный и ремонтопригодны код, аналогичный списку/Меню/навигации стиль поскольку у меня может быть много единиц, уровней и навыков.

Если кто-нибудь может предложить, как создать более эффективную логику для этого.

Больше как:

unitA-1+level-1+skill-1+skill-2 
unitA-1+level-2+skill-1+skill-4+skill-5 

выведет:

<div class="unitA-1">Unit Name 1 
<ul class="level-1">Level Name 1 
<li>Skill Name 1</li> 
<li>Skill Name 2</li> 
</ul> 
<ul class="level-2">Level Name 2 
<li>Skill Name 1</li> 
<li>Skill Name 4</li> 
<li>Skill Name 5</li> 
</ul> 
</div> 

Спасибо всем за ваше время!

Answer 1

Если я правильно понимаю вашу проблему, вы можете сначала посмотреть, как вы храните данные.

С такой реляционной моделью (У единиц есть Уровни, которые имеют Навыки), вы можете использовать JSON-подобный способ хранения. Для примера:

var units = [ 
    { 
     name : 'Unit Name 1', 
     levels : [ 
      { 
       name : 'Level Name 1', 
       skills : [ 
        'Skill Name 1', 
        'Skill Name 2' 
       ] 
      }, 
      { 
       name : 'Level Name 2', 
       skills : [ 
        'Skill Name 1', 
        ... 
       ] 
      }, 
      ... 
     ] 
    }, 
    { 
     name : 'Unit Name 2', 
     levels : [ 
      ... 
     ] 
    }, 
    ... 
]; 

Вы можете перебрать их с JQuery, как:

$(units).each(function (unitIndex, unitValue) { 
    // Print <div>unitValue.name</div> 
    $(unitValue.levels).each(function (levelIndex, levelValue) { 
     // Print header for list (levelValue.name) and <ul> 
     $(levelValue.skills).each(function (skillIndex, skillValue) { 
      // Print <li>skillValue</li> 
     }); 
    }); 
});