在调整窗口大小时让脚本再次运行时遇到问题

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')上。同样，你可以通过级联高度在内.each()结束设置代码消除的$campus变量：

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