使元素的大小與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