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

Question

我编写了一个 JQuery 片段，它遍历一个 JSON 数组并计算一个“新高度”参数，该参数必须分配给要追加的列表项的 CSS 属性。这里的问题是最后计算的高度被分配给所有列表项。即如果 groups[]={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;
}

Answer 1

在添加元素之前直接将样式放在元素上即可；无论如何它会更快:

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。