Javascript 通过jQuery设置特殊条件下的分割高度_Javascript_Jquery

Javascript 通过jQuery设置特殊条件下的分割高度

javascript jquery

Javascript 通过jQuery设置特殊条件下的分割高度,javascript,jquery,Javascript,Jquery,我想写一个程序将高度设置为四个刻度四个分区的高度将设置为四个分区中最大的高度我使用twitter引导只是为了设计目的在这种情况下，id=4的div的高度最大，因此其余三个分区都应设置该高度下面是html代码 <!DOCTYPE html> <html lang="en"> <head> <title> </title> <meta charset="utf-8

我想写一个程序将高度设置为四个刻度

四个分区的高度将设置为四个分区中最大的高度

我使用twitter引导只是为了设计目的

在这种情况下，

id=4的div的高度最大，因此其余三个分区都应设置该高度
下面是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>

我是jQuery的初学者。请在下面关于任何疑问或误解的评论中告诉我。
在您的代码中，您为每个元素在错误的位置设置了高度
如果four4具有最大的高度，并且您只在if语句中设置了greatestDiv，那么其他div将保留它之前的greatestDiv值
要做到这一点，在你拿到炉排后设置所有高度
$(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)
    });
});

在代码中，为每个元素在错误的位置设置高度
如果four4具有最大的高度，并且您只在if语句中设置了greatestDiv，那么其他div将保留它之前的greatestDiv值
要做到这一点，在你拿到炉排后设置所有高度
$(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)
    });
});

首先，您需要将类似的类添加到四个div中，如下所示：
，
。。。它需要使用一个选择器来选择所有的foer DIV
第二，删除无用的字符串$（'#one'）.height（greatestDiv），$（'twoo2'）。高度（greatestDiv）
第三，添加最后一个字符串$（'.division'）.height（greatestDiv）
如下所示：
首先，您需要向四个div添加类似的类：
，
。。。它需要使用一个选择器来选择所有的foer DIV
第二，删除无用的字符串$（'#one'）.height（greatestDiv），$（'twoo2'）。高度（greatestDiv）
第三，添加最后一个字符串$（'.division'）.height（greatestDiv）
像这样：