使元素的大小与jQuery相同

Question

我已经创建了一个函数，该函数应该检查每个元素的大小，以存储变量中最大的大小，然后将该大小应用于所有元素。它在浏览器刷新时似乎正在工作，但当窗口被调整大小时不起作用。这是我的代码;

$(document).ready(function() { 
 
    function jobs_height() { 
 
    var highest = 0; 
 

 
    $(".jobs").each(function() { 
 
     var job_height = $(this).outerHeight(true); 
 

 
     if (job_height > highest) { 
 
     highest = job_height; 
 
     } 
 
    }); 
 

 
    $(".jobs").css("height", highest); 
 
    } 
 

 
    //calling functions 
 
    $(window).ready(function() { 
 
    jobs_height(); 
 

 
    $(window).resize(function() { 
 
     jobs_height(); 
 
    }); 
 
    }); 
 
});

.jobs { 
 
    background-color: yellow; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container" id="jobs_cont"> 
 
    <div class="row"> 
 

 
    <div class="col-xs-12 col-sm-4"> 
 
     <div class="jobs"> 
 
     <h2 class="job_title">Construction Site<br>Supervisor role</h2> 
 
     <p class="salary">Salary: £20,000 – £22,000</p> 
 
     <p class="job_info">Our client is a well-established and respected Building and Refurbishment company based in Leeds, are looking to add an experienced Construction Site Supervisor to their team. <a href="#">See More</a></p> 
 
     <a href="#" class="red_button cv_button">SUBMIT CV</a> 
 
     </div> 
 
    </div> 
 

 
    <div class="col-xs-12 col-sm-4 col-sm-4"> 
 
     <div class="jobs"> 
 
     <h2 class="job_title">Construction Contracts<br>Manager role</h2> 
 
     <p class="salary">Salary: £40,000 – £45,000</p> 
 
     <p class="job_info">Our client is a well-established and respected Building and Refurbishment company based in Leeds, are looking to add an experienced Construction Contracts Manager to their...<a href="#">See More</a></p> 
 
     <a href="#" class="red_button cv_button">SUBMIT CV</a> 
 
     </div> 
 
    </div> 
 

 
    <div class="col-xs-12 col-sm-4"> 
 
     <div class="jobs"> 
 
     <h2 class="job_title">Graduate Quantity<br>Surveyor role</h2> 
 
     <p class="salary">Salary: £20,000 – £22,000</p> 
 
     <p class="job_info">Our client a well-established and respected Building and Refurbishment company based in Leeds, are looking to add a Graduate Quantity Surveyor to their team. <a href="#">See More</a></p> 
 
     <a href="#" class="red_button cv_button">SUBMIT CV</a> 
 
     </div> 
 
    </div> 
 

 
    </div> 
 
</div>

https://codepen.io/Reece_Dev/pen/aLXjbz

UPDATE：

试图杰姆逊后狗的和两个工作我也遇到了另一个问题西蒙的答案。当我硬刷新我得到这个

，你可以看到箱子太小。但一旦我调整窗口大小，它工作正常。这是为什么发生？

更新2：

好了，所以我想通了，为什么它不负载工作。我是因为我使用错误的函数来检查页面何时加载。我应该使用的是;

jQuery(window).on('load', function(){ 
    jobs_height(); 
}); 

Answer 1

以流动的方式思考。

首先您将所有元素的高度设置为固定的高度。

然后您尝试查询元素高度 - 您将始终获得您之前设置的相同高度！（因为它是固定的，“硬编码”）

刚加入这一行$(".jobs").css("height", '');在jobs_height()开始取消以前的定义（它发生得这么快，你不会注意到），你是金色的

编辑

西蒙是正确的，一旦document ready被称为window ready不会被调用 - 所以你只要拨打jobs_height()代替

$(document).ready(function() { 
 
    function jobs_height() { 
 
    $(".jobs").css("height", ''); 
 
    var highest = 0; 
 

 
    $(".jobs").each(function() { 
 
     var job_height = $(this).outerHeight(true); 
 

 
     if (job_height > highest) { 
 
     highest = job_height; 
 
     } 
 
    }); 
 

 
    $(".jobs").css("height", highest); 
 
    } 
 

 
    //calling functions 
 
    jobs_height(); // call function instead of adding listener 
 
    $(window).resize(jobs_height); 
 
    
 
});

.jobs { 
 
    background-color: yellow; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container" id="jobs_cont"> 
 
    <div class="row"> 
 

 
    <div class="col-xs-12 col-sm-4"> 
 
     <div class="jobs"> 
 
     <h2 class="job_title">Construction Site<br>Supervisor role</h2> 
 
     <p class="salary">Salary: £20,000 – £22,000</p> 
 
     <p class="job_info">Our client is a well-established and respected Building and Refurbishment company based in Leeds, are looking to add an experienced Construction Site Supervisor to their team. <a href="#">See More</a></p> 
 
     <a href="#" class="red_button cv_button">SUBMIT CV</a> 
 
     </div> 
 
    </div> 
 

 
    <div class="col-xs-12 col-sm-4 col-sm-4"> 
 
     <div class="jobs"> 
 
     <h2 class="job_title">Construction Contracts<br>Manager role</h2> 
 
     <p class="salary">Salary: £40,000 – £45,000</p> 
 
     <p class="job_info">Our client is a well-established and respected Building and Refurbishment company based in Leeds, are looking to add an experienced Construction Contracts Manager to their...<a href="#">See More</a></p> 
 
     <a href="#" class="red_button cv_button">SUBMIT CV</a> 
 
     </div> 
 
    </div> 
 

 
    <div class="col-xs-12 col-sm-4"> 
 
     <div class="jobs"> 
 
     <h2 class="job_title">Graduate Quantity<br>Surveyor role</h2> 
 
     <p class="salary">Salary: £20,000 – £22,000</p> 
 
     <p class="job_info">Our client a well-established and respected Building and Refurbishment company based in Leeds, are looking to add a Graduate Quantity Surveyor to their team. <a href="#">See More</a></p> 
 
     <a href="#" class="red_button cv_button">SUBMIT CV</a> 
 
     </div> 
 
    </div> 
 

 
    </div> 
 
</div>

Answer 2

如果更新窗口功能，使这里只有一个window.resize并设置每个div的自动的高度，你让他们outerHeight()在此之前应该解决这个问题。

下面是更新的功能：

$(document).ready(function(){ 

    function jobs_height(){ 

     var highest = 0; 

     $(".jobs").each(function(){ 

      $(this).css('height','auto'); 
      var job_height = $(this).outerHeight(); 

      if(job_height > highest){ 
       highest = job_height; 
      } 

     }); 

     $(".jobs").css("height", highest); 
    } 

    //calling functions 
    $(window).resize(jobs_height); 

}); 

这可以在CodePen