通過jQuery在特殊條件下設置分割高度

我想編寫一個程序來將高度設置爲四個分割。通過jQuery在特殊條件下設置分割高度

四個分區的高度將被設置爲等於四個分區的最大高度。

我已經使用twitter bootstrap只是爲了設計目的。

在這種情況下，由於高度與id=four具有最大高度，所有其餘三個部門應該設置高度。下面

是html代碼

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <title> 
     </title> 
     <meta charset="utf-8" /> 
     <!-- Latest compiled and minified CSS --> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    </head> 
    <body> 
     <div class="container"> 
      <div class="row"> 
      <div id="one" class="col-lg-3 col-md-3 col-sm-3 well"> 
       <p>Line one<p> 
      </div> 
      <div id="two" class="col-lg-3 col-md-3 col-sm-3 well"> 
       <p>Line one<p> 
       <p>Line two<p> 
      </div> 
      <div id="three" class="col-lg-3 col-md-3 col-sm-3 well"> 
       <p>Line one<p> 
       <p>Line two<p> 
       <p>Line three<p> 
      </div> 
      <div id="four" class="col-lg-3 col-md-3 col-sm-3 well"> 
       <p>Line one<p> 
       <p>Line two<p> 
       <p>Line three<p> 
       <p>Line four<p> 
      </div> 
     </div> 
     </div>  
     <!-- Latest compiled JavaScript --> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <script type="text/javascript" src="js/custom.js" ></script> 
    </body> 
</html>

下面是代碼custom.js

$(document).ready(function(){ 
    var one1 = $('#one').height(); 
    var two2 = $('#two').height(); 
    var three3 = $('#three').height(); 
    var four4 = $('#four').height(); 
    var greatestDiv = ""; 

    if(one1 > two2 && one1 > three3 && one1 > four4){ 
     greatestDiv = $('#one').height(); 
     $('#one').height(greatestDiv);  
    } 

    if(two2 > one1 && two2 > three3 && two2 > four4){ 
     greatestDiv = $('#two').height(); 
     $('#two2').height(greatestDiv);  
    } 

    if(three3 > one1 && three3 > two2 && three3 > four4){ 
     greatestDiv = $('#three').height(); 
     $('#three3').height(greatestDiv);  
    } 

    if(four4 > one1 && four4 > two2 && four4 > three3){ 
     greatestDiv = $('#four').height(); 
     $('#four4').height(greatestDiv);   
    } 
});

我在jQuery的初學者。有關任何疑問或誤解，請在下面留言。

來源

2016-11-12 R K

在你的代碼中，你正在爲每個elem設置錯誤位置的高度。

如果four4的高度最大，並且您只設置了mostDiv，那麼if語句中的其他div將剩下mostDiv的值之前的值。

爲了f是本，設置所有的高度後，你得到gratestDiv

$(document).ready(function(){ 
    var one1 = $('#one').height(); 
    var two2 = $('#two').height(); 
    var three3 = $('#three').height(); 
    var four4 = $('#four').height(); 
    var greatestDiv = ""; 

    if(one1 > two2 && one1 > three3 && one1 > four4){ 
     greatestDiv = $('#one').height(); 
    } 

    if(two2 > one1 && two2 > three3 && two2 > four4){ 
     greatestDiv = $('#two').height(); 
    } 

    if(three3 > one1 && three3 > two2 && three3 > four4){ 
     greatestDiv = $('#three').height(); 
    } 

    if(four4 > one1 && four4 > two2 && four4 > three3){ 
     greatestDiv = $('#four').height(); 
    } 

    $.each($('.row > div'), function(i, elem){ 
     $(elem).height(greatestDiv) 
    }); 
});

來源

2016-11-12 19:29:44 Gabs00

首先，你需要similiar類添加到四點的div像這樣：<div id="one" class="division col-lg-3 col-md-3 col-sm-3 well">，<div id="two" class="division col-lg-3 col-md-3 col-sm-3 well"> ...它需要使用一個選擇爲所有foer divs。

二，刪除無用的字符串$('#one').height(greatestDiv);，$('#two2').height(greatestDiv); ......

三，最後添加字符串$('.division').height(greatestDiv);

像這樣：https://jsfiddle.net/m43d1dzc/

來源

2016-11-12 19:30:05 mospans

通過jQuery在特殊條件下設置分割高度

回答

相關問題