javascript - CSS高度属性被for循环中最后计算出的height参数覆盖

我编写了一个JQuery片段，它遍历JSON数组并计算一个“new height”参数，该参数必须分配给要追加的列表项的CSS属性。
这里的问题是最后计算的高度被分配给所有列表项。也就是说，如果组[]={2,3}，则高度正确计算为52和78。
但是被分配的css对于这两个列表项的值都是78。
下面是代码片段：

for(k=0; k<JSONObj.rackData[rackIdToBeDisplayed].groups.length; k++){
 newHeight = JSONObj.rackData[rackIdToBeDisplayed].groups[k] * 26;
 $('#rackBoxLi .list').append('<li id="listElement">Device Added</li>');
 $('#rackBoxLi .list #listElement').css({"height": newHeight + 'px'});
 }

listElement的CSS如下-

#listElement{
background-color: #0099CC;
border:1px dashed black;
border-radius: 5px;
width:180px;
margin-bottom: 5px;
}

最佳答案

在添加元素之前，只需将样式直接放在元素上；这样做会更快：

for(k=0; k<JSONObj.rackData[rackIdToBeDisplayed].groups.length; k++){
     newHeight = JSONObj.rackData[rackIdToBeDisplayed].groups[k] * 26;
     $('#rackBoxLi .list').append($("<li/>", {
       text: "Device Added",
       css: { height: newHeight + "px" }
     }));
}

这样就不必进行DOM查找了。
正如大家齐声高呼的那样，不要在添加的每个元素上都添加相同的id。