Größe der Elemente mit jQuery gleich machen

Question

Ich habe eine Funktion erstellt, die die Größe jedes Elements überprüfen soll, speichert die größte Größe in einer Variablen und wendet diese Größe dann auf alle Elemente an. Es scheint zu funktionieren, wenn der Browser aktualisiert wird, aber nicht, wenn das Fenster in der Größe geändert wird. Hier ist mein Code;

$(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:

nach dem Hund Jameson versucht, Antworten und Simons, die beide arbeiten ich ein anderes Problem gestoßen sind. Wenn ich mich schwer aktualisieren erhalten diese

, wie Sie die Boxen sind zu klein, zu sehen. Aber sobald ich das Fenster verkleinere, funktioniert es gut. Warum passiert dies?

UPDATE 2:

Ok, damit ich herausgefunden, warum es nicht auf Last arbeitet. Ich war, weil ich die falsche Funktion verwendete, um zu überprüfen, wenn die Seite geladen wurde. Was ich verwenden sollte ist;

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

Answer 1

denken Sie in einer fließenden Art und Weise.

Zuerst stellen Sie die Höhe aller Elemente auf eine feste Höhe.

dann versuchen Sie, die Elemente Höhe abzufragen - Sie werden immer die gleiche Höhe erhalten, die Sie zuvor festgelegt haben! (weil es fixiert und „hart codiert“)

nur $(".jobs").css("height", ''); in Beginn jobs_height() diese Zeile fügen Sie Ihre vorherigen Definition löschen (es so schnell passiert, Sie werden nicht merken), und Sie sind golden

EDIT

simon ist richtig, einmal document readywindow ready genannt wird, nicht aufgerufen werden - so sollten Sie jobs_height() nur

stattdessen rufen 10

$(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

Wenn Sie die Fensterfunktionen aktualisieren, so dass es nur ein einziges window.resize ist und die Höhe jedes des divs auf auto gesetzt, bevor Sie ihre outerHeight() erhalten dann, dass es lösen sollte.

Hier ist die aktualisierte Funktion:

$(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); 

}); 

Dies kann auf CodePen