为div增加一些额外的高度，div与另一个div的高度相等

Question

我下面的脚本等于包含特定类的两个div的高度。但在我的情况下，我需要为div增加一些额外的高度。

我认为这张图片解释得非常好：

我的剧本

$(document).ready(function(){  
    //set the starting bigestHeight variable  
    var biggestHeight = 0;  
    //check each of them  
    $('.equal_height').each(function(){  
        //if the height of the current element is  
        //bigger then the current biggestHeight value  
        if($(this).height() > biggestHeight){  
            //update the biggestHeight with the  
            //height of the current elements  
            biggestHeight = $(this).height();  
        }  
    });  
    //when checking for biggestHeight is done set that  
    //height to all the elements  
    $('.equal_height').height(biggestHeight);  
});  

Answer 1

以下是一个示例，如何使用类div向第二个equal_height添加额外的高度：

＆＃13;

＆＃13;

$(document).ready(function() {   
    var biggestHeight = 0;  
    $('.equal_height').each(function(){  
        if($(this).height() > biggestHeight){  
            biggestHeight = $(this).height();  
        }  
    });  
    $('.equal_height').each(function(i, item) {
      if (i === 1) {
        $(item).height(biggestHeight + 50);
      } 
    });
});

＆＃13;

.equal_height {
  display: inline-block;
  width: 50px;
  height: 50px;
  background-color: violet;
  margin-left: 10px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="equal_height"></div>
<div class="equal_height"></div>
<div class="equal_height"></div>

＆＃13;

＆＃13;

＆＃13;

此脚本会使您div的所有equal_height与$(document).ready(function() { var biggestHeight = 0; $('.equal_height').each(function(){ if($(this).height() > biggestHeight){ biggestHeight = $(this).height(); } }); $('.equal_height').each(function(i, item) { $(item).height(biggestHeight); }); });级相同的高度（最大高度）：

＆＃13;

＆＃13;

.equal_height {
  display: inline-block;
  width: 50px;
  background-color: violet;
  margin-left: 10px;
}

#one {
  height: 50px;
}

#two {
  height: 25px;
}

#three {
  height: 75px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="equal_height" id="one"></div>
<div class="equal_height" id="two"></div>
<div class="equal_height" id="three"></div>

＆＃13;

{{1}}

＆＃13;

＆＃13;

＆＃13;