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

Question

I have written a JQuery snippet that iterates through a JSON array and calculates a "new height" parameter which has to be assigned to the CSS property for the list item being appended. The problem here is that the last calculated height is getting assigned for all the list items. ie if groups[]={2,3} , the height is correctly calculated as 52 and 78. But the css being assigned is having a value of 78 for both the list items.

Below is the code snippet:

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

CSS for listElement is as follows -

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

Answer 1

Just put the style directly on the element before you add it; it'll be faster anyway:

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

That way you don't have to do the DOM lookup at all.

And as has been chanted in unison, don't put the same id on every element you add.

Answer 2

It looks like your ID specified in the JavaScript is the same every time:

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

If they all have the same ID, then this selector will match all of them every time:

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

The point of an ID is that it is unique per element - so that you can select an ID and know you're only selecting one element. To fix this you could change it so that it's using your iterator ( k ) in order to make them all different:

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

In order to still be able to give them all the same style in your CSS file, you should give them the same class , like this:

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

And then change your CSS to reference it by class instead of ID.

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

Answer 3

You shouldn't use the same id for multiple elements. No need to re-select the created item either. You can just do it like this:

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

The first thing I see here is that you're adding multiple items to your list, and assigning them all the same ID. IDs should only be used once, try a class instead.

As to your question, when you use a selector in JQuery it grabs all elements on the page that fit what you have specified. So every time you say "#rackBoxLi .list #listElement" it grabs anything it finds that matches that, which would be all of the items added thus far. Try "#rackBoxLi .list #listElement:last", which would just highlight the last element in the group, which would be the latest added item.

Answer 5

In your loop you are setting the CSS which is applied to all the elements that match #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'});                  
}

IDs are supposed to be unique to each element so try this instead.

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

As you are going to use the rule for multiple elements, use a class instead:

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

Instead of finding the element after you created it (which is why you find more than you want to), create the element and keep the reference to it:

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

As whiterabbit25 answered

Change code from

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

To below code

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

If you don't want to use class or id then

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

If .eq() doesn't works for you then use .last()

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

Hope this helps..