他のdivと等しい高さを持つdivにある程度の余分な高さを追加

Question

私は、その下のスクリプトが派手なクラスを含む2つの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 ：

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