Question

我想编写一个程序来将高度设置为四个分区。

四个分区的高度将设置为等于四个分区的最大高度。

我使用twitter bootstrap只是出于设计目的。

在这种情况下，由于id=four的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>

以下代码为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的初学者。请在下面的评论中告诉我有关任何疑问或误解。

Answer 1

在您的代码中，您要为每个元素在错误的位置设置高度。

如果four4具有最大高度，并且您只在该if语句中设置了greatDiv，那么其他div将保留其前面的greatDiv值。

要获得此信息，请在获得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)
    });
});

Answer 2

首先，你需要为这样的四个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 div使用一个选择器。

其次，删除无用的字符串$('#one').height(greatestDiv);，$('#two2').height(greatestDiv); ...

第三，添加最后一个字符串$('.division').height(greatestDiv);

像这样：https://jsfiddle.net/m43d1dzc/

通过jQuery在特殊条件下设置分区高度

2 个答案: