Réglage des hauteurs égales pour les div avec jQuery

Réponse à votre question

Votre code a été la vérification de toutes les colonnes à l'intérieur d'un conteneur, ce que vous devez faire est de:

• En boucle sur chaque conteneur
  • Obtenir les hauteurs de chaque colonne à l'intérieur de ce conteneur
  • Trouver le plus haut
  • Appliquer que la hauteur de chaque colonne dans le conteneur avant de passer à la suivante.

Note: Essayez de donner un exemple jsfiddle de votre question, il nous permet
plus facile de vous aider et de comprendre la question, vous obtenez de voir la
solution de travail tout de suite et il encourage des réponses plus rapides.

Rapide (Bruts) Par Exemple

JS:

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

});

CSS:

.container { border 1px solid red; }
.column { border: 1px solid blue; float:left; width: 30%; text-align:center; }

HTML:

<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, j'ai trouvé que l'air prometteur si vous en voulez plus
intelligent de péréquation des contrôles

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

---

Adressage @Mem question

Question: Va $(document).ready() travail si vous avez des images à charge qui, à son tour modifier les hauteurs de conteneurs?

D'égalisation des hauteurs après le chargement de l'image

Si vous êtes le chargement des images, vous trouverez que cette solution ne fonctionne pas toujours. C'est parce que document.prêt est tiré le plus tôt possible, ce qui signifie qu'il n'attend pas de ressources externes pour être chargé dans l' (comme les images).

Lors de vos images, enfin, de la charge, ils peuvent fausser la hauteur de leurs contenants après l'égalisation de script, à l'origine trop ne semblent pas trop de travail.

De problèmes d'égalisation de hauteurs avec des images

1. Lier une image de chargement des événements

C'est la meilleure solution (au moment de la rédaction) et implique la liaison à la img.load événement. Tout ce que vous avez à faire est d'obtenir un décompte du nombre de dhceu il y a $('img').length et puis, pour chacun des load, -1 de comptage jusqu'à ce que vous frappez à zéro, alors le feu de l'égaliseur.

La mise en garde ici est load ne peut pas tirer dans tous les navigateurs, si l'image est dans le cache. Regardez autour de google/github, il devrait y avoir une solution de script là-bas. Au moment de l'écriture, j'ai trouvé waitForImages de Alexander Dickson (non testé, ce n'est pas une approbation).

1. Un autre plus fiable est la solution de window.charger événement. Cela devrait généralement toujours. Toutefois, si vous cochez la docs, vous remarquerez que cet événement se déclenche après TOUTES les ressources externes sont chargés. Cela signifie que si vos images sont chargées, mais il y a un peu de javascript (en attente de téléchargement, il ne sera pas le feu jusqu'à ce que s'achève.

Si vous chargez la majorité de vos alias asyncronously et sont à l'aise avec la minimisation, la compression et la répartition de la charge que vous avez probablement l'habitude ont des problèmes avec cette méthode, mais tout à coup une lente CDN (arrive tout le temps) peut causer des problèmes.

Dans les deux cas, vous pourriez prendre un muet approche et d'appliquer de secours des chronomètres. Ont la égaliser script de s'exécuter automatiquement après quelques secondes, juste au cas où l'événement n'a pas d'incendie ou de quelque chose est lente hors de votre contrôle. Il n'est pas infaillible, mais en réalité, vous aurez satisfaire 99% de vos visiteurs avec ce secours, si vous réglez la minuterie correctement.

Vous avez besoin de ceci:

$('.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 de code suivant crée un tableau des hauteurs:

  $columns.map(function(){
      return $(this).height();
  }).get()

• Math.max.apply( Math, array ) trouve le maximum d'éléments du tableau

• $columns.height(maxHeight); définit toutes les colonnes de hauteur de hauteur maximale.

Démonstration en direct

C'est ma version de blocs de la même hauteur... Par exemple, vous avez un divthat contient des divs 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);
});

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

Donc, ci-dessous le script jquery pour définir la hauteur égale à la colonne des Mathématiques.max calculera les deux divs hauteur et prend de la hauteur la plus élevée soit peut être à 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émonstration En Direct

Je souhaite que j'avais lu ce post avant que je (avec l'aide de Earl) créé ce

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);
      });
  }

Il y a un plugin jQuery pour cet objectif précis: https://github.com/dubbs/equal-height

Si vous voulez faire toutes les colonnes de même hauteur, utilisation:

$('.columns').equalHeight();

Si vous souhaitez les regrouper par leur position de tête, par exemple. au sein de chaque conteneur:

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

//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);

        }); 

    });