Javascript 基于json变量动态添加边栏项和名称（<；li>；）

我有一个侧边栏（

ul

），我想根据存储在

containerType

变量中的项目数动态地附加子项，该变量是一个jQuery cookie存储（每个用户的项目数不同）

我现在要做的是（当窗口加载时）：

然后：

for（变量i=0；i'
).附于（“.侧导航”）；
document.getElementById（“tmpValue”）.innerHTML=obj；
}

问题是，通过引用同一个条目，最后一个条目总是会替换最上面的条目

我如何解决这个问题？我想用

document.write

来编写

obj

，但是我无法让它工作（我是js/jquery的新手），而且我读的不是很好的实践

我希望有人能在我“失去它”之前帮助我：D

---

谢谢你

我建议您使用这个：

for (var i=0; i < containerTypes.length; i++){
var obj = containerTypes[i];
$('<li class="accordion-group"><a class="accordion-toggle collapsed" 
data-toggle="collapse" data-parent="#side-nav" href="#stats-collapse">
<i class="icon-bar-chart"></i> <span class="name" id="tmpValue">'+obj+'</span></a></li>'
).appendTo(".side-nav"); ////--------add obj here-----------------^^^
}

for（变量i=0；i'
).appendTo（“.side nav”）；在此处添加obj-----------------^^^
}

试试：

for（变量i=0；i）。附加到（'side nav'）；
//----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------^当前容器---------------------------
}

这应该是可行的，但更好、更具可读性的方法是：

for (var i = 0; i < containerTypes.length; i++) {
    var obj = containerTypes[i];
    var liTag = $('<li>').addClass('accordion-group').appendTo('#side-nav');
    var aTag = $('<a>').addClass('accordion-toggle').addClass('collapsed').attr({
        'data-toggle': 'collapse',
        'data-parent': '#side-nav',
        'href': '#stats-collapse'
    }).appendTo(liTag);
    var spanTag = $('<span>').addClass('name').text(obj).appendTo(aTag);
}

for（变量i=0；i'）。addClass（'accordion-group'）。appendTo（'side-nav'）；
var aTag=$（''）.addClass（'accordion-toggle'）.addClass（'collapsed'）.attr({
“数据切换”：“折叠”，
“数据父项”：“侧导航”，
“href”：“统计数据崩溃”
}).附录（利塔格）；
var spanTag=$（''）.addClass（'name'）.text（obj）.appendTo（aTag）；
}

**Jquery**

for (var i=0; i < containerTypes.length; i++){
    $('<li class="accordion-group"><a class="accordion-toggle collapsed" 
    data-toggle="collapse" data-parent="#side-nav" href="#stats-collapse">
    <i class="icon-bar-chart"></i> <span class="name" id="tmpValue">'+containerTypes[i]+'</span></a></li>'
    ).appendTo(".side-nav");
}

for（变量i=0；i'
).附于（“.侧导航”）；
}

LOL，我真是个白痴！我确实试图逃避变量，但没有成功（一定是打字错误），所以我放弃了这个想法。尽管如此，还是非常感谢！！你先来，所以你得到了正确的答案

for (var i=0; i < containerTypes.length; i++){
    var obj = containerTypes[i];
    $('<li class="accordion-group"><a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#side-nav" href="#stats-collapse"><i class="icon-bar-chart"></i> <span class="name">' + obj + '</span></a></li>').appendTo(".side-nav");
//----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------^current container---------------------------
}

for (var i = 0; i < containerTypes.length; i++) {
    var obj = containerTypes[i];
    var liTag = $('<li>').addClass('accordion-group').appendTo('#side-nav');
    var aTag = $('<a>').addClass('accordion-toggle').addClass('collapsed').attr({
        'data-toggle': 'collapse',
        'data-parent': '#side-nav',
        'href': '#stats-collapse'
    }).appendTo(liTag);
    var spanTag = $('<span>').addClass('name').text(obj).appendTo(aTag);
}

for (var i=0; i < containerTypes.length; i++){
    $('<li class="accordion-group"><a class="accordion-toggle collapsed" 
    data-toggle="collapse" data-parent="#side-nav" href="#stats-collapse">
    <i class="icon-bar-chart"></i> <span class="name" id="tmpValue">'+containerTypes[i]+'</span></a></li>'
    ).appendTo(".side-nav");
}