jquery - 根据其中的内容调整表格列的高度

Question

如何根据iframe高度调整td的高度。 我尝试了 height:auto，但它不起作用。每个 iframe 都有不同的内容，因此高度也不同

我正在使用内容轮播在一个 iframe 与另一个 iframe 之间切换。

最初发生的是内容轮播动画在每个 iframe 之间自动切换。然后登陆第一个 iframe。然后用户可以使用轮播导航在 iframe 之间切换。

<td class="tabContainer">
<div id="multipleIframe">
<iframe></iframe>
<iframe></iframe>
<iframe></iframe>
<iframe></iframe>
</div>
</td>

下面是我用来更改每个 iframe 的高度和 td 高度的代码。

setTimeout(function() {
$("#multipleIframe iframe").each(function() {
var heightIframe;
heightIframe = $(this).contents().height();
$(this).css({
    "height": heightIframe
});
var tabHeight;
tabHeight = heightIframe + 50;
$(".tabContainer").css({"height":tabHeight+"px"})
});
}, 3000)

我们能解决这个问题吗？

Answer 1

tabHeight 值在每次迭代中设置为 heightIframe。将它放在循环之外。

setTimeout(function() {
  var tabHeight=0; // set it to zero and outside the loop
  $("#multipleIframe iframe").each(function() {
    var heightIframe = $(this).contents().height();
    $(this).css({
      "height": heightIframe + "px" <--- add "px" here too
    });
    tabHeight += heightIframe + 50; // add each iframe's height to tabHeight
  });
  $(".tabContainer").css({"height":tabHeight+"px"}); // apply the tab height
}, 3000);