jQueryでdivの高さを検出して変更する方法

Question

レイアウトの複雑なデザインのため、基本的にレイアウト内の複数のdivを見て、最高のものを選んでequalHeightsという関数を作成しました。その高さはそれに等しいので、私は同じ高さのdivで終わることができます。だから、基本的にページが読み込まれた後、コードを見ると、style = "height：xxx"が各divに適用されます。これを変更することはできませんので、どのソリューションでもこの機能に触れることはできません。

divもオーバーフローがhiddenに設定されています。これは再び目的を持ち、変更できません。

したがって、私がする必要があるのは、ユーザーのインタラクティブ性による変更に基づいてdivの高さを変更できることです。たとえば、ユーザーがリンクをクリックすると展開される非表示の行があるテーブルがあります。テーブルの余分な長さは、オーバーフローのために隠されます、私は拡大するdivのサイズが必要です。同時に、この拡張を特定のクリックにバインドしたくないので、Javascriptでコンテンツの変更を検出し、それに応じてdivを拡張します。そのようにバインドしたくない理由は、同じレイアウトの別のページに実装する必要があり、すべてのイベントをコーディングしたくないからです。

私は両方試してみました：

$("#myDiv").content().resize(function(){ 
    equalHeight($("#myDiv")); 
}); 

どちら

$("#myDiv").resize(function(){ 
    equalHeight($("#myDiv")); 
}); 

と

を動作するようです！何か案は？

Answer 1

基本resizeイベントは$（ウィンドウ）にバインドすることができますが、DIVにresizeイベントをバインドすることができるようにしたい場合は、プラグインを使用する必要があります。

http://benalman.com/projects/jquery-resize-plugin/

Answer 2

設定された行数が表示されていると仮定すると、それ以上の数を確認して、それに応じてdivをスタイルすることができます。

Answer 3

することができます関数内で独自のdivイベントをトリガーします。したがって、クリック機能を書き直すことはありません。

Answer 4

 var last_height = $('#div').css('height'); 

     $(window).resize(function() { 
      if($('#div').css('height') != last_height) 
      { 
       last_height = $('#div').css('height'); 
       //do what you want 
      } 
     });