Question

我正在尝试使用jQuery.load（）根据加载到其中的内容动态更改div容器的高度。我已经尝试了许多不同的方法来安排代码，在这里搜索和查看了很多帖子，并通过jQuery上的文档阅读。如果我在页面加载后在firebug控制台中运行它，但是在保存代码并加载页面时，我的函数才有效。如果脚本是由页面运行的，控制台会为所有表高度输出“0”，但是当我在firebug中运行它时，它会给出正确的高度。

代码如下。基本上，它是一个用户定义的页面，我粘贴了这个脚本，div＃element4位于jQuery jQuery选项卡中。你能发现我的代码中的错误还是帮我搞定？

$("#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

您要为每个max_height将table重置为零。尝试将其移出each循环，以及最终设置的高度：

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

通过使用$ .load（）在使用$（“＃tabs”）创建选项卡之前加载外部内容，我找到了解决问题的方法。tabs（）;.然后我使用类似于上面发布的脚本..这是最后运行。因此，加载内容，创建选项卡，调整div的大小。

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

如果某人有更好的解决方案，我们非常感谢。

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

2 个答案: