Question

我编写了一个JQuery代码片段，它遍历JSON数组并计算出一个新的高度＆＃34;必须分配给要追加的列表项的CSS属性的参数。这里的问题是为所有列表项分配了最后计算的高度。即如果群组[] = {2,3}，则高度正确计算为52和78。但是，分配的css对于两个列表项都具有值78.

以下是代码段：

 print contact.getChildValue('tel',default = None, childNumber = 0)
 print contact.getChildValue('tel',default = None, childNumber = 1)

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

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。

Answer 2

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

$('#rackBoxLi .list').append('<li id="listElement">Device Added</li>');

如果它们都具有相同的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'});                  
}

为了仍能在CSS文件中为它们提供相同的样式，您应该为它们提供相同的类，如下所示：

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

然后更改CSS以按类而不是ID引用它。

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

Answer 3

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

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

Answer 4

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

关于你的问题，当你在JQuery中使用选择器时，它会抓取页面上符合你指定内容的所有元素。因此，每当你说“#rackBoxLi .list #listElement”时，它会抓取它找到的匹配的内容，这将是迄今为止添加的所有项目。尝试“#rackBoxLi .list #listElement：last”，它只会突出显示组中的最后一个元素，这将是最新添加的项目。

Answer 5

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

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

Answer 6

当您要对多个元素使用规则时，请改为使用类：

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

Answer 7

正如whiterabbit25回答

从

更改代码

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

如果您不想使用课程或ID，那么

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

如果.eq（）不适合您，请使用.last（）

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

希望这会有所帮助..

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

7 个答案: