web-dev-qa-db-ja.com

jQueryを使用してdivの高さを等しく設定する

JQueryでdivに同じ高さを設定したい。すべてのdivには、異なる量のコンテンツと異なるデフォルトの高さがあります。これが私の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>

次のjQuery関数で高さを設定しています：

$(document).ready(function(){

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

});

これは正常に機能しますが、私の場合はすべての「列」を1つの「コンテナ」内でのみ等しくしたいので、うまくいきません。つまり、最初のコンテナではすべてのボックスが最初のdivと同じ高さである必要がありますが、2番目のコンテナでは2番目の列と等しくなければなりません。

だから質問です-これに到達するためにjQueryをどのように変更する必要がありますか？

ありがとうございました！

jqueryhtmlheightequals
32
Mitya Ustinov

特定の質問への回答

あなたのコードはコンテナ内のすべての列をチェックしていました、あなたがする必要があるのは：

  • 各コンテナをループします
    • そのコンテナ内の各列の高さを取得します
    • 最高のものを見つける
    • 次の列に進む前に、そのコンテナのすべての列にその高さを適用します。

注：問題のjsfiddleの例を提供してください。それにより、問題をより簡単に支援して理解できるようになり、すぐに実用的なソリューションを確認できるようになり、迅速な対応が促進されます。

クイック（ラフ）の例

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


ライブラリ！

ここに、もっと賢いイコライゼーションコントロールが必要な場合に有望なライブラリがあります

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


@Memの質問への対応

質問：$(document).ready()は、コンテナの高さを変更するロードする必要がある画像がある場合に機能しますか？


画像ロード後の高さの均等化

イメージをロードしている場合、このソリューションが常に機能するとは限りません。これは、 _document.ready_が可能な限り早い時間に起動される であるため、外部リソース（イメージなど）のロードを待機しないことを意味します。

画像が最終的に読み込まれると、イコライゼーションスクリプトの実行後にコンテナの高さがゆがみ、あまりにも機能していないように見える場合があります。


高さを画像と等しくすることを解決する

  1. 画像読み込みイベントにバインド

これは（執筆時点で）最適なソリューションであり、_img.load_イベントへのバインドを伴います。あなたがしなければならないのは、$('img').lengthがいくつあるかをカウントし、そのカウントからload、_-1_ごとに0に達するまでイコライザーを起動することです。 。

ここでの注意点は、画像がキャッシュ内にある場合、すべてのブラウザでloadが起動しない可能性があることです。 google/githubを見てください。そこにソリューションスクリプトがあるはずです。この記事を書いている時点で、私は Alexander DicksonのwaitForImages （未検証、これは推奨ではありません）を見つけました。

  1. 別のより信頼性の高いソリューションは、 _window.load_ イベントです。通常、これは常に機能するはずです。ただし、 docs outをチェックすると、すべての外部リソースがロードされた後にこのイベントが発生することに気付くでしょう。これは、画像はロードされているが、ダウンロードを待機しているJavaScriptがある場合、それが完了するまで起動しないことを意味します。

外部の大部分を非同期にロードし、負荷の最小化、圧縮、分散に優れている場合、おそらくこの方法で問題は発生しませんが、CDNが突然遅くなると（常に発生する）問題が発生する可能性があります。

どちらの場合でも、あなたは愚かなアプローチを取り、フォールバックタイマーを適用できます。イベントが発生しない場合、または何かが制御不能になる場合に備えて、設定された数秒後にイコライズスクリプトを自動的に実行します。それは絶対確実ではありませんが、実際には、タイマーを正しく調整すれば、このフォールバックで訪問者の99％を満足させるでしょう。

82
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

あなたにはこれが必要です：

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

説明

  • 次のスニペットは、高さの配列を作成します。

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

  • Math.max.apply( Math, array )は配列項目の最大値を見つけます

  • $columns.height(maxHeight);は、すべての列の高さを最大の高さに設定します。

ライブデモ

7
Engineer

重要な改善！ （$（this）.height（ 'auto'）;を追加しました。高さを測定する前に、autoにリセットする必要があります。サイズ変更時にこの関数を使用できます）

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

これは、同じ高さにブロックを設定する私のバージョンです...たとえば、「col」という名前のdivを含むdivがあります

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

そのため、jqueryスクリプトの下で、Math.maxが2つのdivの高さを計算し、左または右のいずれかで最も高い高さを取る列に等しい高さを設定します。

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

ライブデモ

1
Faizal

私は（アールの助けを借りて）この投稿を作成する前にこの投稿を読みたいと思います

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

この方法で関数を書くこともできます。これは、最後にクラス名またはIDを追加するだけでコードを1回作成するのに役立ちます

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

コンテナ内に画像がある場合は、imagesLoadedが必要です。これはレスポンシブにも機能します。

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

この正確な目的のためのjQueryプラグインがあります： https://github.com/dubbs/equal-height

すべての列を同じ高さにしたい場合は、次を使用します。

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

最上位でグループ化したい場合、例えば各コンテナ内：

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

.parent() AP​​Iを使用して、個別のコンテナーに到達できます。

好む、

var highestBox = 0;
        $('.container .column').each(function(){  
                if($(this).parent().height() > highestBox){  
                highestBox = $(this).height();  
        }
    });
0
AdityaParab
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