Как убедиться, что два div всегда имеют одинаковую высоту в jQuery Mobile

Question

Я очень плохо знаком с мобильным фреймворком jquery, так что будьте добры со мной. Я разрабатываю проект, в котором мне нужно показать эти данные в табличном формате. Поэтому я использовал структуру ниже, чтобы создать левый и правый столбец.

<div data-role="controlgroup" data-theme="d" class="ui-grid-m ui-corner-all ui-controlgroup ui-controlgroup-vertical">  
        <div id="left" class="ui-block-m">
            <li>Moisture Sensitivity Level (MSL)</li>
        </div>
        <div id="right" class="ui-block-n">
            <li>  3      </li>
        </div>
</div>

Но проблема в том, что когда у меня есть большая строка в одном из столбцов и более короткая строка в другом столбце, тогда высота столбца искажается. Итак, мой вопрос: как я могу гарантировать, что оба div (которые я использую как столбцы, имеющие классы ui-block-m и ui-block-n) имеют одинаковую высоту.

Любое предложение высоко ценится. Заранее спасибо !!.

Как я могу убедиться, что div с классом ui-block-m и div с классом ui-block-n

Answer 1

быстро и грязно:

$(function(){
    var $m = $('.ui-block-m');
    var $n = $('.ui-block-n')
    if($m.height() < $n.height()){
        $m.css('height',$n.height());
    }else if($m.height() > $n.height()){
        $n.css('height',$m.height());
    }
});