文章/答案/技术大牛

发布

社区首页 >问答首页 >用jQuery循环数组

问用jQuery循环数组
EN

Stack Overflow用户

提问于 2015-01-08 20:16:05

回答 1查看 51关注 0票数 1

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

我有以下例子：

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。

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>

谢谢大家抽出时间来！

javascript

jquery

arrays

list

loops

回答 1

Stack Overflow用户

回答已采纳

发布于 2015-01-08 20:40:47

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

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

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/27848772

复制

相似问题

问用jQuery循环数组
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问用jQuery循环数组EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问用jQuery循环数组
EN