Question

我不知道我在做什么做得足够好, 才能弄清楚为什么在调整窗口的大小时, 高度没有被重新计算。另外,我希望计算方法能对三所学校的每个学校进行分流。

任何帮助请见: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 );

Answer 1

我最后自己解决了这个问题: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 );

Answer 2

以下是您的代码正在做的 :

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);

Answer 3

以下是您可以做的, 将每个学校的校区分别隔开来评估身高:

$(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 );

友情链接