webentwicklung-frage-antwort-db.com.de

Gleiche Höhe für divs mit jQuery einstellen

Ich möchte mit jQuery die gleiche Höhe für divs einstellen. Alle Divs können unterschiedliche Inhalte und Standardhöhen haben. Hier ist ein Beispiel meines HTML-Layouts:

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

Ich setze die Höhe mit der nächsten jQuery-Funktion:

$(document).ready(function(){

    var highestBox = 0;
        $('.container .column').each(function(){  
                if($(this).height() > highestBox){  
                highestBox = $(this).height();  
        }
    });    
    $('.container .column').height(highestBox);

});

Das funktioniert gut, aber nicht in meinem Fall, weil ich alle 'Spalten' nur in einem 'Container' haben möchte. Dies bedeutet, dass im ersten Container alle Boxen so hoch sein müssen wie das erste div, im zweiten Container müssen sie jedoch der zweiten Spalte entsprechen.

Die Frage ist also - wie sollte ich meine jQuery ändern, um dies zu erreichen?

Vielen Dank!

31
Mitya Ustinov

Beantworten Sie Ihre spezifische Frage

Ihr Code hat alle Spalten in einem Container überprüft. Sie müssen Folgendes tun:

  • Durchlaufen Sie jeden Container
    • Ermitteln Sie die Höhe jeder Spalte in diesem Container
    • Finde den höchsten 
    • Wenden Sie diese Höhe auf jede Spalte in diesem Container an, bevor Sie zur nächsten wechseln.

Hinweis: Versuchen Sie, ein Beispiel für Ihr Problem anzugeben. Es ermöglicht uns Um Ihnen leichter zu helfen und das Problem zu verstehen, sehen Sie die Arbeitslösung sofort und ermutigt zu schnelleren Antworten.

Schnelles (grobes) Beispiel

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


Bibliothek!

Hier ist eine Bibliothek, die ich gefunden habe und die vielversprechend aussieht, wenn Sie mehr wollen clevere Entzerrungskontrollen

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



@ Mem's Frage beantworten

Frage: Funktioniert $(document).ready(), wenn Sie Bilder haben, die geladen werden müssen, wodurch die Höhe der Container geändert wird?


Ausgleichshöhen nach dem Laden des Bildes

Wenn Sie Bilder laden, werden Sie feststellen, dass diese Lösung nicht immer funktioniert. Dies liegt daran, dass document.ready zum frühest möglichen Zeitpunkt ausgelöst wird, was bedeutet, dass nicht auf das Laden externer Ressourcen (wie Bilder) gewartet wird.

Wenn Ihre Bilder schließlich geladen werden, verzerren sie möglicherweise die Höhen ihrer Container, nachdem das Equalization-Skript ausgeführt wurde.


Ausgleichen von Höhen mit Bildern

  1. Binden an Bildladevorgänge

Dies ist die beste Lösung (zum Zeitpunkt des Schreibens) und bindet an das img.load-Ereignis. Alles, was Sie tun müssen, ist zu zählen, wie viele Imgs es gibt, $('img').length und dann für jede load, -1 von dieser Zählung bis Sie Null erreichen, und den Equalizer auslösen.

Der Nachteil hierbei ist, dass load möglicherweise nicht in allen Browsern ausgelöst wird, wenn sich das Bild im Cache befindet. Schauen Sie sich google/github um, es sollte ein Lösungsskript draußen sein. Zum Zeitpunkt des Schreibens fand ich waitForImages von Alexander Dickson (ungeprüft, dies ist keine Bestätigung). 

  1. Eine zuverlässigere Lösung ist das Ereignis window.load . Dies sollte im Allgemeinen immer funktionieren. Wenn Sie jedoch die Option docs checken, werden Sie feststellen, dass dieses Ereignis ausgelöst wird, nachdem ALLE externen Ressourcen geladen wurden. Das heißt, wenn Ihre Bilder geladen sind, es jedoch ein paar Javascript gibt, das zum Download bereit ist, werden sie erst ausgelöst, wenn das abgeschlossen ist.

Wenn Sie die Mehrheit Ihrer Externen asynchron laden und die Last minimieren, komprimieren und verteilen, werden Sie wahrscheinlich keine Probleme mit dieser Methode haben, jedoch kann ein plötzlich langsames CDN (das passiert immer wieder) Probleme verursachen.

In beiden Fällen können Sie einen dummen Ansatz wählen und Fallback-Timer anwenden. Lassen Sie das Equalize-Skript nach einigen Sekunden automatisch laufen, nur für den Fall, dass das Ereignis nicht ausgelöst wird oder sich etwas außerhalb Ihrer Kontrolle befindet. Es ist kein Narrenbeweis, aber in Wirklichkeit werden Sie 99% Ihrer Besucher mit diesem Fallback zufriedenstellen, wenn Sie den Timer richtig einstellen.

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

Du brauchst das:

$('.container').each(function(){  
     var $columns = $('.column',this);
     var maxHeight = Math.max.apply(Math, $columns.map(function(){
         return $(this).height();
     }).get());
     $columns.height(maxHeight);
});

Erklärung

  • Das folgende Snippet erstellt ein Array der Höhen:

    $columns.map(function(){
        return $(this).height();
    }).get()
    
  • Math.max.apply( Math, array ) findet das Maximum von Arrayelementen

  • $columns.height(maxHeight); setzt die Höhe aller Spalten auf die maximale Höhe.

Live Demo

6
Engineer

Wichtige Verbesserung! (Ich habe $ (this) .height ('auto') hinzugefügt; vor der Messung der Höhe sollten wir sie auf auto zurücksetzen. Dann können wir diese Funktion bei der Größenänderung verwenden.)

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

Dies ist meine Version von Blöcken in der gleichen Höhe ... Zum Beispiel haben Sie ein div, das divs mit dem Namen "col" enthält

$('.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
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.
1
krishanan

Unter dem Jquery-Skript können Sie also die gleiche Höhe für die Spalte festlegen, die Math.max die Höhe der beiden Divs berechnet und die höchste Höhe einnimmt, entweder links oder rechts.

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

Live Demo

1
Faizal

Sie können die Funktion auch auf diese Weise schreiben. Dies hilft, Ihren Code einmalig zu erstellen

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

Sie benötigen imagesLoaded, wenn sich im Container Bilder befinden .. .. Dies funktioniert auch für 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

Für genau diesen Zweck gibt es ein jQuery-Plugin: https://github.com/dubbs/equal-height

Wenn Sie alle Spalten auf die gleiche Höhe bringen möchten, verwenden Sie:

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

Wenn Sie sie nach ihrer obersten Position gruppieren möchten, z. in jedem Behälter:

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

Sie können jeden einzelnen Container mit der .parent()-API erreichen.

Mögen,

var highestBox = 0;
        $('.container .column').each(function(){  
                if($(this).parent().height() > highestBox){  
                highestBox = $(this).height();  
        }
    }); 
0
AdityaParab

Ich wünschte, ich hätte diesen Post gelesen, bevor ich (mit der Hilfe von Earl) diesen erstellt habe

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