动态Div Height jQuery.Load（）不起作用

Question

I'm trying to dynamically change the height of a div container based on the content loaded into it with jQuery.load(). I've tried many different ways of arranging the code, searched and viewed many posts here and read through the documentation on jQuery. My function works if I run it in the firebug console after page load but not when the code is saved and loads with the page. The console outputs "0" for all the table heights if the script is run by the page, but it gives the proper heights when I run it in firebug.

The code is below. Basically, it's a user-defined page where I've pasted this script and the div #element4 sits within jQuery a jQuery tab. Can you spot an error in my code or help me get it working?

$("#element4").load("<dbid>?act=API_GenResultsTable&qid=8", function(response, status, xhr) {
 if (status == "success") {
    $('#element4 table').each( function(x, y){
    var max_height = 0;  
    var yHeight = $(y).height();
    max_height = ( yHeight > max_height) ? yHeight : max_height;
    $('#element4').height(max_height);
    console.log(max_height);
  });
  }
 });

Answer 1

You are resetting max_height to zero for each table . Try moving that out of the each loop, along with the eventual setting of the height:

var max_height = 0; // init max
// find tallest table
$('#element4 table').each(function(x, table) {
    var yHeight = $(table).height();
    max_height = (yHeight > max_height) ? yHeight : max_height;
});
$('#element4').height(max_height); // set height
console.log(max_height);

Answer 2

I was able to find a workaround to the issue by using $.load() to load the external content before creating the tabs with $("#tabs").tabs();. Then I used the script similar to what was posted above.. This is run last. So load content, create tabs, resize the divs.

$('#ELEMENTID table').each(function (x, y) { //find table heights in the <div> 
var max_height = 0;
var yHeight = $(y).innerHeight();
max_height = (yHeight > max_height) ? yHeight : max_height;
var compHeight = max_height + 24; //adding 24 because it was the standard height for the smallest of 3 tables.. 
$('#element3').height(compHeight);
console.log(compHeight);

If someone has a better solution, it's much appreciated.