0

ウィンドウのサイズを変更するときに高さが再計算されない理由を理解できるほど、自分が何をしているのかわかりません。また、計算を 3 つの学校ごとに個別に実行したいと考えています。

何か助けていただければ幸いです：http://jsfiddle.net/joshnh/kmwmf/

$(window).resize( function() {

    var $school = $('.content ul'),
        $campus = $('.content ul p'),
        campusHeight = 0;

    $school.each( function() {
        $campus.each( function() {
            if($(this).height() > campusHeight) {
                campusHeight = $(this).height();
            }
        });
    });

    $campus.height(campusHeight);        
    console.log(campusHeight);

}).trigger('resize');
4

3 に答える 3

0

私はそれを自分で解決することになりました：http://jsfiddle.net/joshnh/kmwmf/7/

高さを測定する前にインライン スタイル属性を削除すると、ウィンドウのサイズを変更するときにコードが正しく機能することが保証されました。

$(window).resize( function() {

    var $school = $('.content ul'); 

    $school.each( function() {
        var $campus = $(this).find('p'),
            campusHeight = 0;

        $campus.each( function() {
            $(this).removeAttr('style');
            if($(this).height() > campusHeight) {
                campusHeight = $(this).height();
            } 
        });

        $campus.height(campusHeight);
    });   

}).trigger('resize');
于 2012-05-29T05:30:46.353 に答える
0

コードが現在行っていることは次のとおりです。

var $school = $('.content ul'),    // select all school ul elements
    $campus = $('.content ul p'),  // select ALL campus paragraphs
    campusHeight = 0;

$school.each( function() {         // iterate over the schools
    $campus.each( function() {     // iterate over ALL campuses, not just
                                   // the ones for the current school

以下は、学校ごとに個別の計算を行う必要があります。

$(window).resize( function() {

    $('.content ul').each( function() { // iterate over the school ul elements
        var campusHeight = 0,
            $campus = $('p', this);     // get campuses for current school
        $campus.each( function() {      // iterate over current campuses
            if($(this).height() > campusHeight) {
                campusHeight = $(this).height();
            }
        });
        $campus.height(campusHeight);   // set height for campuses
        console.log(campusHeight);      // in current school
    });    

}).trigger('resize');

私のコードでは、$schools変数を削除しました。これは、アウター.each()をイニシャルに直接追加できるためです$('.content ul')。$campus同様に、内側の末尾に高さ設定コードをチェーンすることで、変数を削除できます.each()。

        $('p', this).each( function() {
            if($(this).height() > campusHeight) {
                campusHeight = $(this).height();
            }
        }).height(campusHeight);
于 2012-05-28T06:55:21.587 に答える
0

できることは次のとおりです。各学校のキャンパスを個別に繰り返して身長を評価します。

$(window).resize( function() {

  var $school = $('.content ul');

$school.each( function() {
    $campus = $(this).find('p');
    campusHeight = 0;
    $campus.each( function() {
        if($(this).height() > campusHeight) {
            campusHeight = $(this).height();
        }
    });
     $campus.height(campusHeight);
});



  console.log(campusHeight);

}).trigger('resize');

これは、学校のキャンパスを個別にサイズ変更しただけです。高さを再計算するには、この編集を参照してください:

 $(window).resize( function() {

    var $school = $('.content ul');

    $school.each( function() {
    $campus = $(this).find('p');
    campusHeight = 0;
    $campus.css('height', ''); //forces to remove height to recalculate new height

    $campus.each( function() {
        if($(this).height() > campusHeight) {
            campusHeight = $(this).height();
        }
    });
     $campus.height(campusHeight);
});



  console.log(campusHeight);

}).trigger('resize');
于 2012-05-28T07:00:53.783 に答える