jquery - jqueryで2つの要素の高さを動的に設定する

Question

次のようなセクション<section id="left_side"> //Some crap here.</section>と、このような脇の要素があります。<aside id="right_side"> //Some crap here.</aside>

私がやりたいのは、脇のコンテナの高さがセクションコンテナよりも大きい場合、jQueryを使用して高さを拡大し、脇のコンテナ以上にすることです。

しかし、同時に、サイドがセクション コンテナーよりも小さい場合は、その高さを拡張してセクション コンテナーと等しくする必要があります。

jQueryを使用してこれを行う方法がまったくわかりません。

Answer 1

$('.section-container').on('adjustNeighbors', '#leftside,#rightside', function () {
  var thisHeight = $(this).outerHeight();
  var sectionToResize = $(this).is('#leftside') ? '#rightside' : '#leftside';

  $(sectionToResize).css('height', thisHeight + 'px');
});

そして、このようにトリガーします。

function someFunction(){    
    // some code that resized #leftside or #rightside
    thatSection.trigger('adjustNeighbors');
}

Answer 2

function resize_section_aside() {
     var section = $('leftside'),
         aside = $('rightside'),
         section_height = section.height(),
         aside_height = aside.height();
     if( aside_height > section_height ) {
        section.height( aside_height );  // re-size section to aside
     } else {
        aside.height( section_height );   // re-size aside to section
     }
    });
}

$(function() {
   resize_section_aside();
});

上記のコードはDOMロード終了時に起動します。イベントを発生させる必要がある場合は、resize_section_aside()そのイベント ハンドラー内で関数を呼び出すだけです。