同じクラスで、私はどのように高さ（ピクセル単位）に応じて、divをリサイズする機能を持っている

Question

のサイズを変更するウィンドウ上のdivの高さを取得する他のdivです：

<script type="text/javascript"> 

    function resizeTheDivs(tag){ 
     // first get the tags to adjust 
     var $tags = $('.' + tag); 
     var $new_height = 0; 
     // find out which one is largest 
     $('.' + tag).each(function(){ 
      $(this).height() > $new_height ? $new_height = $(this).height() : null; 
     }); 
     // make all others that height 
     $tags.height($new_height); 
     // I console.log($new_height) here sometimes 
    } 

    // resize divs on document load 
    $(document).ready(function(){ 
     resizeTheDivs('the-class'); 
    }); 
    // resize divs on window resize 
    $(window).resize(function() { 
     resizeTheDivs('the-class'); 
    }); 

</script> 

のdivがページのロードに正しくサイズを変更しますが、ウィンドウのサイズ変更機能から​​が発生すると、$new_heightは変更されません。

コンテキスト：pタグ内にテキストを含む3つのdiv（左に浮動小数点、33％の幅で隣り合わせに浮動小数点があります）があります。だから、ブラウザの幅をリサイズすると、テキストは「長く」なりますが、javascript関数はdivの新しい高さを取り上げません。

アイデア？

Answer 1

あなたはそれを測定する前にautoにheightをリセットする必要があり、さもなければそれは常にあなたが$(document).readyに設定された固定値を返します：CSSのFlexを使用しないのはなぜ

function resizeTheDivs(tag){ 
    // first get the tags to adjust 
    var $tags = $('.' + tag); 
    var $new_height = 0; 
    // find out which one is largest 
    $('.' + tag).each(function(){ 
     $(this).removeAttr('style'); 
     $(this).height() > $new_height ? $new_height = $(this).height() : null; 
    }); 
    // make all others that height 
    $tags.height($new_height); 
    // I console.log($new_height) here sometimes 
}