使用 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(""));

上面的代码会循环遍历 unitA 和 unitB 并将数据输出到 DIV 中的 HTML body。

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