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

以下是您的代码目前正在做的事情：

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 2

这是你可以做的，分别迭代每所学校的校园来评估身高：

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

Answer 3

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

调整窗口大小时无法再次运行脚本

3 个答案: