通过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在特殊条件下设置分割高度

回答

相关问题