web-gelistirme-sc.com

JQuery ile div için eşit yükseklikleri ayarlama

JQuery ile divs için eşit yükseklik ayarlamak istiyorum. Bütün div'ler farklı miktarda içeriğe ve farklı varsayılan yüksekliğe sahip olabilir. İşte html düzenimin bir örneği:

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

Bir sonraki jQuery işleviyle yüksekliği ayarlıyorum:

$(document).ready(function(){

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

});

Bu iyi çalışıyor ancak benim durumumda değil çünkü tüm 'sütunların' sadece bir 'konteyner' içinde eşit olmasını istiyorum. Bu, ilk kaptaki tüm kutuların ilk div kadar yüksek olması gerektiği anlamına gelir ancak ikincisinde ikinci sütuna eşit olmaları gerekir.

Öyleyse soru - jQuery'umu buna ulaşmak için nasıl değiştirmeliyim?

Teşekkür ederim!

31
Mitya Ustinov

Özel sorunuza cevap

Kodunuz herhangi bir kaptaki tüm sütunları kontrol ediyordu, yapmanız gereken şey:

  • Her bir konteynırın içinden döngü yapın.
    • O kabın içindeki her bir sütunun yüksekliğini al
    • En yüksek olanı bul 
    • Bir sonrakine geçmeden önce bu yüksekliği o kaptaki her sütuna uygulayın.

Not: Sorununuzla ilgili bir örnek jsfiddle sunmaya çalışın, bize izin veriyor. Size daha kolay yardım etmek ve sorunu anlamak için, hemen çalışma çözümü ve daha hızlı yanıt alınmasını sağlar.

Hızlı (Kaba) Örnek

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


Kütüphane!

İşte biraz daha fazla istersen umut verici görünen bir kütüphane buldum. akıllı eşitleme kontrolleri

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



@ Mem'in sorusunu ele almak

Soru: Konteynerlerin yüksekliğini değiştiren, yüklenmesi gereken resimleriniz varsa $(document).ready() işe yarayacak mı?


Görüntü yüklendikten sonra yükseklikleri eşitleme

Görüntüleri yüklüyorsanız, bu çözümün her zaman işe yaramadığını görürsünüz. Bunun nedeni document.ready 'nun mümkün olan en kısa sürede ateşlenmesidir , yani harici kaynakların yüklenmesini beklemiyor demektir (görüntüler gibi).

Resimleriniz nihayet yüklendiğinde, dengeleme betiği çalıştıktan sonra konteynerlerinin yüksekliğini çarpıtabilir, bu da fazla çalışmamasına neden olabilir.


Görüntülerle eşitleme yüksekliğini çözme

  1. Resim yükleme etkinliklerine bağla

Bu (yazma sırasında) en iyi çözümdür ve img.load olayına bağlanmayı içerir. Yapmanız gereken tek şey, $('img').length işlevinin kaç tane img bulunduğunu ve ardından her load için, bu sayıdan -1 sıfıra gelinceye kadar, sonradan ekolayzerini ateşleyen bir sayı elde etmektir.

Buradaki uyarı load, eğer görüntü önbellekte ise tüm tarayıcılarda patlamayabilir. Google/github'a bakın, orada bir çözüm betiği olmalı. Yazarken Alexander Dickson'dan waitForImages'ı buldum (denenmemiş, bu bir onay değil). 

  1. Daha güvenilir bir çözüm de window.load olayıdır. Bu genellikle her zaman çalışması gerekir. Ancak, docs out’a bakarsanız, TÜM harici kaynaklar yüklendikten sonra bu olayın başladığını fark edeceksiniz. Bu, resimleriniz yüklü ise ancak indirmeyi bekleyen bir javascript var, bu tamamlanıncaya kadar ateş etmeyecektir.

Dışarıdakilerin çoğunluğunu asenkron olarak yüklerseniz ve yükü minimize etmek, sıkıştırmak ve yaymak konusunda akıllıca davranırsanız, muhtemelen bu yöntemle ilgili herhangi bir sorun yaşamayacaksınız, ancak aniden yavaş bir CDN (her zaman olur) sorunlara neden olabilir.

Her iki durumda da, aptal bir yaklaşım izleyebilir ve geri dönüş zamanlayıcıları uygulayabilirsiniz. Eşitleme komut dosyasının, olayın patlamaması veya kontrolünüzdeki bir şeyin yavaş olması durumunda, birkaç saniye sonra otomatik olarak çalışmasını sağlayın. Aptalca bir kanıt değil, ancak gerçekte zamanlayıcıyı doğru ayarlarsanız, ziyaretçilerinizin% 99'unu bu geri dönüş ile tatmin edeceksiniz.

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

Buna ihtiyacın var:

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

Açıklama

  • Aşağıdaki kod parçası, bir dizi yükseklik oluşturur:

    $columns.map(function(){
        return $(this).height();
    }).get()
    
  • Math.max.apply( Math, array ), dizi öğelerinin maksimumunu bulur

  • $columns.height(maxHeight);, tüm sütunların yüksekliğini maksimum yüksekliğe ayarlar.

Canlı demo

6
Engineer

Önemli gelişme! ($ (This) .height ('auto') ekledim; yüksekliği ölçmeden önce - onu otomatik olarak sıfırlamalıyız. Sonra bu işlevi yeniden boyutlandırmada kullanabiliriz)

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

Bu benim aynı yükseklikte ayar blokları versiyonum.

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

Böylece, jquery betiğinin altında, Math.max'in iki divs yüksekliğini hesaplayacağı ve sola veya sağa olabilecek en yüksek yüksekliği alan sütuna eşit yüksekliği ayarlamak için.

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

Canlı Demo

1
Faizal

Fonksiyonu bu şekilde de yazabilirsiniz. Bu, kodunuzu bir kez oluşturmanıza yardımcı olur.

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

Kap içinde ..__ görüntüler varsa imagesLoaded'a ihtiyacınız vardır, __.

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

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.

0
krishanan

Bunun için bir jQuery eklentisi var: https://github.com/dubbs/equal-height

Tüm sütunları aynı yükseklikte yapmak istiyorsanız, şunu kullanın:

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

Bunları üst konumlarına göre gruplandırmak istiyorsanız, örn. her bir kap içinde:

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

Her bir ayrı kaba, .parent() API kullanarak ulaşabilirsiniz.

Sevmek,

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

Keşke bu yazıyı (Earl'ün yardımı ile) yaratmadan önce okusaydım

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