Je veux définir une hauteur égale pour les div avec jQuery. Tous les divs peuvent avoir une quantité de contenu différente et une hauteur par défaut différente. Voici un exemple de ma mise en page HTML:
This is
the highest
column One line Two
lines One line Two
lines One line
Je règle la hauteur avec la prochaine fonction jQuery:
$(document).ready(function(){ var highestBox = 0; $('.container .column').each(function(){ if($(this).height() > highestBox){ highestBox = $(this).height(); } }); $('.container .column').height(highestBox); });
Cela fonctionne bien, mais pas dans mon cas car je veux que toutes les “colonnes” ne soient égales que dans un “conteneur”. Cela signifie que dans le premier conteneur, toutes les cases doivent être aussi hautes que la première div, mais dans le second, elles doivent être égales à la deuxième colonne.
La question est donc – comment devrais-je modifier mon jQuery pour y parvenir?
Je vous remercie!
Répondre à votre question spécifique
Votre code vérifiait toutes les colonnes d’un conteneur. Ce que vous devez faire est:
Remarque: essayez de fournir un exemple de problème de votre problème, cela nous permet de vous aider plus facilement à comprendre le problème, de voir immédiatement la solution opérationnelle et d’encourager des réponses plus rapides.
Exemple rapide (rugueux)
$(document).ready(function(){ // Select and loop the container element of the elements you want to equalise $('.container').each(function(){ // Cache the highest var highestBox = 0; // Select and loop the elements you want to equalise $('.column', this).each(function(){ // If this box is higher than the cached highest then store it if($(this).height() > highestBox) { highestBox = $(this).height(); } }); // Set the height of all those children to whichever was highest $('.column',this).height(highestBox); }); });
.container { border 1px solid red; } .column { border: 1px solid blue; float:left; width: 30%; text-align:center; }
This is
the highest
column One line Two
lines One line Two
lines One line
$(document).ready(function(){ $('.container').each(function(){ var highestBox = 0; $(this).find('.column').each(function(){ if($(this).height() > highestBox){ highestBox = $(this).height(); } }) $(this).find('.column').height(highestBox); }); });
Tu en as besoin:
$('.container').each(function(){ var $columns = $('.column',this); var maxHeight = Math.max.apply(Math, $columns.map(function(){ return $(this).height(); }).get()); $columns.height(maxHeight); });
Explication
L’extrait suivant construit un tableau des hauteurs:
$columns.map(function(){ return $(this).height(); }).get()
Math.max.apply( Math, array )
trouve le maximum d’éléments de tableau
$columns.height(maxHeight);
définit la hauteur de toutes les colonnes sur la hauteur maximale.
Démo en direct
Amélioration importante! (J’ai ajouté $ (this) .height (‘auto’); avant de mesurer la hauteur – nous devrions le réinitialiser sur auto. Ensuite, nous pouvons utiliser cette fonction lors du redimensionnement.)
function equalheight () { $('.cont_for_height').each(function(){ var highestBox = 0; $('.column_height', this).each(function(){ var htmlSsortingng = $( this ).html() ; $(this).height('auto'); if($(this).height() > highestBox) highestBox = $(this).height(); }); $('.column_height',this).height(highestBox); }); }
Ceci est ma version de la mise en blocs dans la même hauteur … Par exemple, vous avez un div qui contient div avec le nom “col”
$('.col').parent().each(function() { var height = 0, column = $(this).find('.col'); column.each(function() { if ($(this).height() > height) height = $(this).height(); }); column.height(height); });
Vous avez besoin d’imagesLoaded si le conteneur contient des images. Cela fonctionne aussi pour responsive.
$(document).ready(function () { equalHeight('.column'); }); $(window).resize(function(){equalHeight('.column');}); function equalHeight(columnClass){ $('.eq-height-wrap').imagesLoaded(function(){ $('.eq-height-wrap').each(function(){ var maxHeight = Math.max.apply(null, $(this).find(columnClass).map(function () { return $(this).innerHeight(); }).get()); $(columnClass,this).height(maxHeight); }); }); }
Ainsi, sous le script jQuery, définissez la hauteur égale sur la colonne dans laquelle Math.max calculera la hauteur des deux divs et prendra la hauteur la plus élevée, que ce soit à gauche ou à droite.
$(document).ready(function() { var Equalheights = Math.max($(“#left”).height(), $(“#right”).height()); $(“#left”). Equalheights(d); $(“#right”). Equalheights(d); }); Highest height will be assigned to both left and right divs
Démo en direct
Vous pouvez écrire la fonction de cette façon aussi Ce qui aide à construire votre code une fois, juste pour append un nom de classe ou un ID à la fin
function equalHeight(group) { tallest = 0; group.each(function() { thisHeight = jQuery(this).height(); if(thisHeight > tallest) { tallest = thisHeight; } }); group.height(tallest); } equalHeight(jQuery("Add your class"));
Vous pouvez atteindre chaque conteneur distinct à l’aide de l’API .parent()
.
Comme,
var highestBox = 0; $('.container .column').each(function(){ if($(this).parent().height() > highestBox){ highestBox = $(this).height(); } });
var currentTallest = 0, currentRowStart = 0, rowDivs = new Array(), $el, topPosition = 0; $('.blocks').each(function() { $el = $(this); topPostion = $el.position().top; if (currentRowStart != topPostion) { // we just came to a new row. Set all the heights on the completed row for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) { rowDivs[currentDiv].height(currentTallest); } // set the variables for the new row rowDivs.length = 0; // empty the array currentRowStart = topPostion; currentTallest = $el.height(); rowDivs.push($el); } else { // another div on the current row. Add it to the list and check if it's taller rowDivs.push($el); currentTallest = (currentTallest < $el.height()) ? ($el.height()) : (currentTallest); } // do the last row for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) { rowDivs[currentDiv].height(currentTallest); } });
$('.blocks') would be changed to use whatever CSS selector you need to equalize.
Il existe un plugin jQuery à cet effet: https://github.com/dubbs/equal-height
Si vous voulez que toutes les colonnes aient la même hauteur, utilisez:
$('.columns').equalHeight();
Si vous souhaitez les regrouper par ordre de position, par exemple. dans chaque conteneur:
$('.columns').equalHeight({ groupByTop: true });
function setEqualHeight(columns) { var tallestColumn = 0; columns.each(function(){ var currentHeight = $(this).height(); if(currentHeight > tallestColumn){ tallestColumn = currentHeight; } }); columns.height(tallestColumn); } => setEqualHeight($('.column'));
// Select and loop the container element of the elements you want to equalise $('.equal').each(function(){ // Cache the highest var highestBox = 0; // Select and loop the elements you want to equalise $('.col-lg-4', this).each(function(){ // If this box is higher than the cached highest then store it if($(this).height() > highestBox) { highestBox = $(this).height(); } }); // Set the height of all those children to whichever was highest $('.col-lg-4',this).height(highestBox); }); });
var a = ['.a','.b']; a.forEach(function(value) { var column = 0; $(value).find('.cols-to-eq').each(function(){ if($(this).height() > column){ column = $(this).height(); } }); $(value).find('.cols-to- eq').attr('style','height:'+column+'px'); });