Rendre la taille des éléments identique avec jQuery

Question

J'ai créé une fonction qui est censée vérifier la taille de chaque élément stocker la plus grande taille dans une variable, puis appliquer cette taille à tous les éléments. Il semble fonctionner quand le navigateur est rafraîchi mais pas quand la fenêtre est redimensionnée. Voici mon 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

MISE À JOUR:

après avoir essayé Jameson les réponses du chien et Simon qui travaillent tous les deux que j'ai rencontré un autre problème. Quand je reçois dur je rafraîchisse cette

que vous pouvez voir les cases sont trop petites. mais une fois que je redimensionne la fenêtre, cela fonctionne très bien. Pourquoi cela arrive-t-il?

MISE À JOUR 2:

Ok, donc je me suis dit pourquoi il ne fonctionnait pas sur la charge. J'étais parce que j'utilisais la mauvaise fonction pour vérifier quand la page a été chargée. Ce que je devrais utiliser est;

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

Answer 1

penser à un écoulement.

d'abord vous définissez la hauteur de tous les éléments à une hauteur fixe.

alors vous essayez d'interroger la hauteur des éléments - vous aurez toujours la même hauteur que vous avez défini auparavant! (parce qu'il est fixe et « codé en dur »)

juste ajouter cette ligne $(".jobs").css("height", ''); au début de jobs_height() annuler votre définition précédente (il arrive si vite que vous ne remarquerez) et vous êtes en or

EDIT

simon est juste, une fois document ready est appelé window ready ne sera pas appelé - donc vous appeler simplement jobs_height() au lieu

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

Si vous mettez à jour les fonctions de la fenêtre pour qu'il n'y ait qu'un seul window.resize et régler la hauteur de chacune des divs à auto avant d'obtenir leur outerHeight() cela devrait le résoudre.

est ici la fonction mise à jour:

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

}); 

Cela peut être testé sur CodePen