javascript - 向与另一个 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

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

$(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);
      } 
    });
});

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

<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>

并且此脚本将使所有具有 equal_height 类的 div 具有相同的高度(最大高度):

$(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);
    });
});

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

#one {
  height: 50px;
}

#two {
  height: 25px;
}

#three {
  height: 75px;
}

<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>