web-dev-qa-db-fra.com

Définir des hauteurs égales pour les div avec jQuery

Je veux définir une hauteur égale pour les div avec jQuery. Tous les divs peuvent avoir une quantité différente de contenu et une hauteur par défaut différente. Voici un exemple de ma mise en page HTML:

<div class="container">
    <div class="column">This is<br />the highest<br />column</div>
    <div class="column">One line</div>
    <div class="column">Two<br />lines</div>
</div>
<div class="container">
    <div class="column">One line</div>
    <div class="column">Two<br>lines</div>
    <div class="column">One line</div>
</div>

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.

Alors la question est - comment devrais-je modifier mon jQuery pour atteindre ceci?

Je vous remercie!

jqueryhtmlheightequals
31
Mitya Ustinov

Réponse à votre question spécifique

Votre code vérifiait toutes les colonnes d'un conteneur. Ce que vous devez faire est:

  • Boucle à travers chaque conteneur
    • Obtenez les hauteurs de chaque colonne dans ce conteneur
    • Trouvez le plus haut 
    • Appliquez cette hauteur à chaque colonne de ce conteneur avant de passer à la suivante.

Remarque: Essayez de fournir un exemple jsfiddle de votre problème, cela nous permet pour vous aider plus facilement et comprendre le problème, vous voyez le solution de travail immédiatement et il encourage des réponses plus rapides.

Quick (Rough) Exemple

$(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; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div class="container">
    <div class="column">This is<br />the highest<br />column</div>
    <div class="column">One line</div>
    <div class="column">Two<br />lines</div>
</div>
<div class="container">
    <div class="column">One line</div>
    <div class="column">Two<br>lines</div>
    <div class="column">One line</div>
</div>


Bibliothèque!

Voici une bibliothèque que j'ai trouvée qui semble prometteuse si vous en voulez plus contrôles d'égalisation intelligents

http://brm.io/jquery-match-height-demo/


Répondre à la question de @ Mem

Question: $(document).ready() fonctionnera-t-il si vous avez des images à charger qui modifient à leur tour les hauteurs des conteneurs?


Égalisation des hauteurs après chargement de l'image

Si vous chargez des images, vous constaterez que cette solution ne fonctionne pas toujours. En effet, (document.ready est activé le plus tôt possible) , ce qui signifie qu'il n'attend pas que des ressources externes soient chargées (telles que des images).

Lorsque vos images se chargent enfin, elles peuvent déformer les hauteurs de leurs conteneurs une fois le script d'égalisation exécuté, ce qui semble ne pas trop fonctionner.


Résoudre des hauteurs d'égalisation avec des images

  1. Lier aux événements de chargement d'image

C'est la meilleure solution (au moment de l'écriture) et implique une liaison à l'événement img.load. Tout ce que vous avez à faire est d’obtenir un décompte du nombre d’img il y a $('img').length, puis pour chaque load, -1 de ce décompte jusqu’à ce que vous atteigniez zéro, puis activez l’égaliseur.

La mise en garde est que load peut ne pas être activé dans tous les navigateurs si l'image est dans le cache. Regardez autour de Google/github, il devrait y avoir un script de solution là-bas. Au moment de la rédaction, j’ai trouvé waitForImages d’Alexander Dickson (non testé, il ne s’agit pas d’un endossement). 

  1. Une autre solution plus fiable est l’événement window.load . Cela devrait généralement toujours fonctionner. Toutefois, si vous extrayez la docs , vous remarquerez que cet événement se déclenche une fois que TOUTES les ressources externes ont été chargées. Cela signifie que si vos images sont chargées mais que du javascript est en attente de téléchargement, il ne se déclenchera pas avant la fin.

Si vous chargez la majorité de vos externes de manière asynchrone et que vous maîtrisez bien la réduction, la compression et la répartition de la charge, vous ne rencontrerez probablement aucun problème avec cette méthode. Toutefois, un CDN soudainement lent (qui se produit tout le temps) peut poser problème.

Dans les deux cas, vous pouvez adopter une approche idiote et appliquer des temporisateurs de secours. Laissez le script d'égalisation s'exécuter automatiquement après quelques secondes au cas où l'événement ne se déclencherait pas ou que quelque chose ne tourne pas rond hors de votre contrôle. Ce n’est pas infaillible, mais en réalité, vous allez satisfaire 99% de vos visiteurs avec ce repli si vous réglez correctement le minuteur.

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


});
9
Snow Blind

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

6
Engineer

Amélioration importante! (J'ai ajouté $ (this) .height ('auto'); avant de mesurer la hauteur - nous devrions le réinitialiser sur auto. Nous pouvons ensuite utiliser cette fonction lors du redimensionnement)

function equalheight () {
            $('.cont_for_height').each(function(){  

                var highestBox = 0;
                $('.column_height', this).each(function(){

                    var htmlString = $( this ).html()

                    ;


                $(this).height('auto');

                    if($(this).height() > highestBox) 
                       highestBox = $(this).height(); 
                });  

                $('.column_height',this).height(highestBox);

        });  

        }
4
squarepixell

Ceci est ma version de la mise en blocs dans la même hauteur ... Par exemple, vous avez un div qui contient des 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);
});
3
Scribilicious

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

1
Faizal

Vous pouvez écrire la fonction de cette façon aussi Ce qui aide à construire votre code une fois Juste pour ajouter 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"));
1
Chetan bane

Vous avez besoin d'imagesLoaded si le conteneur contient des images à l'intérieur . Cela fonctionne également 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);
        });
    });
}
1
kmiloangel
  <script>
function equalHeight(group) {
   tallest = 0;
   group.each(function() {
      thisHeight = $(this).height();
      if(thisHeight > tallest) {
         tallest = thisHeight;
      }
   });
   group.height(tallest);
}
$(document).ready(function() {
   equalHeight($(".column"));
});
</script>
1
Minu Alex

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 voulez les regrouper par leur position de tête, par exemple. dans chaque conteneur:

$('.columns').equalHeight({ groupByTop: true });
0
strictlyk3v

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();  
        }
    });
0
AdityaParab

J'aurais aimé lire cet article avant de créer celui-ci (avec l'aide de Earl)

setMaxHeightForTitles($column, $title) {
      var maxHeight = 0;
      $column.find($title)
      .each(function(index, title){
        var height = $(title).height();
        if  (height > maxHeight) maxHeight = height;
      })
      .each(function(index, title){
        $(title).height(maxHeight);
      });
  }
0
Tristanisginger
function setEqualHeight(columns) {
  var tallestColumn = 0;

  columns.each(function(){
    var currentHeight = $(this).height();

    if(currentHeight > tallestColumn){
      tallestColumn  = currentHeight;
    }
  });

  columns.height(tallestColumn);
}

=> setEqualHeight($('.column'));
0
Sky Yip
// 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);

        }); 

    });
0
Shahzaib khan
<div class('a')>
   <div class('.cols-to-eq')></div>
   <div class('.cols-to-eq')></div>
   <div class('.cols-to-eq')></div>
   <div class('.cols-to-eq')></div>
</div>
<div class('b')>
   <div class('.cols-to-eq')></div>
   <div class('.cols-to-eq')></div>
   <div class('.cols-to-eq')></div>
   <div class('.cols-to-eq')></div>
</div>
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');
   });
0
Franko Loshe