Javascript CSS height属性被for循环中最后计算的height参数覆盖

我编写了一个JQuery代码段，该代码段遍历JSON数组，并计算一个新的高度参数，该参数必须分配给要附加的列表项的CSS属性。 这里的问题是，为所有列表项指定了上次计算的高度。i、 e如果组[]={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'});                  
 }

---

我在这里看到的第一件事是，您将多个项目添加到列表中，并为它们分配相同的ID。ID应该只使用一次，请尝试使用一个类

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

---

至于您的问题，当您在JQuery中使用选择器时，它会获取页面上符合您指定的内容的所有元素。所以每次你说rackBoxLi.list listElement时，它都会抓取它找到的与之匹配的任何内容，这将是迄今为止添加的所有项目。尝试rackBoxLi.list listElement:last，它只会突出显示组中的最后一个元素，即最新添加的项。

在循环中，您正在设置应用于与rackBoxLi.list listElement匹配的所有元素的CSS

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

ID对于每个元素都应该是唯一的，因此请尝试使用此方法

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

---

在添加元素之前，只需将样式直接放在元素上；无论如何，它会更快：

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。

看起来JavaScript中指定的id每次都是相同的：

$'rackBoxLi.list'。追加'Device Added'

如果它们都具有相同的ID，则此选择器每次都将匹配它们：

$'rackBoxLi.list listElement'.css{height:newHeight+'px'}

ID的意义在于每个元素都是唯一的，因此您可以选择一个ID并知道您只选择了一个元素。要解决此问题，您可以对其进行更改，使其使用迭代器k，以使它们完全不同：

for(k=0; k<JSONObj.rackData[rackIdToBeDisplayed].groups.length; k++){                   
 newHeight = JSONObj.rackData[rackIdToBeDisplayed].groups[k] * 26;                  

 //Notice that it's inserting k into the id, so that they'll all be different
 $('#rackBoxLi .list').append('<li id="listElement' + k + '">Device Added</li>');

 $('#rackBoxLi .list #listElement' + k).css({"height": newHeight + 'px'});                  
}

---

您不应该对多个元素使用相同的id。也无需重新选择已创建的项目。你可以这样做：

for(k=0; k<JSONObj.rackData[rackIdToBeDisplayed].groups.length; k++){                   
 newHeight = JSONObj.rackData[rackIdToBeDisplayed].groups[k] * 26;                  

 //This way they'll all have the same class, but different IDs
 $('#rackBoxLi .list').append('<li class="listElement" id="listElement' + k + '">Device Added</li>');

 $('#rackBoxLi .list #listElement' + k).css({"height": newHeight + 'px'});                  
}

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

---

由于要对多个元素使用规则，请改用类：

.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;                  
  var el = $('<li>').addClass('listElement').text('Device Added');
  $('#rackBoxLi .list').append(el);
  el.css({"height": newHeight + 'px'});                  
}

---

正如怀特拉比回答的那样

从更改代码

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

---

希望这有帮助。

这看起来像是一个上下文问题。尝试在newHeight赋值之前添加一个var语句，并检查它是否有效：var newHeight=..，因为可能有许多元素与rackBoxLi.list匹配，您需要使用.each遍历它们，或者使用选择器匹配某个项目。您正在添加具有相同id的多个元素。您反复使用id listElement-这是无效的。id属性对于页面上的每个元素都必须是唯一的。@SpencerWieczorek注释更有意义。我只关注代码结构，而不是jQuery选择器。他关注的是独特的元素。制作一个CSS类实际上并不能让你达到目的。这很有效：非常感谢。我一开始不知道id必须是唯一的。您需要在最后一个选择器中执行'rackBoxLi.list listElement'+k。

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

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

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

$('#rackBoxLi .list li').last().css({"height": newHeight + 'px'});