Javascript 使用jQuery在数组中循环

我有一个关于创建用户友好触摸自定义列表的问题

我举了以下例子：

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

我的目标是创建用户友好且可维护的代码，类似于列表/菜单/导航样式，因为我可能拥有许多单元、级别和技能

如果有人能建议如何创建更有效的逻辑来处理这个问题

更像：

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>

单元名称1
级别名称1
技能名称1
技能名称2

级别名称2
技能名称1
技能名称4
技能名称5

---

谢谢大家抽出时间

如果我正确理解了您的问题，您可能需要首先了解如何存储数据

对于这种关系模型（单元具有具有技能的级别），您可能希望使用类似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>
        });
    });
});

$（单位）。每个（函数（unitIndex，unitValue）{
//打印unitValue.name
$（unitValue.levels）。每个（函数（levelIndex，levelValue）{
//打印列表标题（levelValue.name）和

$（levelValue.skills）。每个（函数（skillIndex，skillValue）{
//打印
技能值
});
});
});

成功了！我使用了var$unit=$（''+unitValue.name+''）；最后是$（'body'）.append（$unit.append（$level.append（$skill））；

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 : [
            ...
        ]
    },
    ... 
];

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