0

我不知道自己做得足够好，无法弄清楚为什么在调整窗口大小时没有重新计算高度。另外，我希望对三所学校中的每一所都分别进行计算。

任何帮助将不胜感激：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

这是您的代码当前正在执行的操作：

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 回答
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 回答