jquery - 根据孩子身高设置父母身高

Question

我有一个带有几张幻灯片的滑块；每张幻灯片都有不同的高度。

它是这样工作的：

第一张幻灯片

<holder>
 <slide - display: block>
 <slide - display: none>
 <slide - display: none>
</holder>

第二张幻灯片

<holder>
 <slide - display: none>
 <slide - display: block>
 <slide - display: none>
</holder>

等等

幻灯片有position: absolute（必须是这样）。

所以问题是：如何动态改变高度holder以查看每张幻灯片的全部内容？

我现在有：

<script type="text/javascript">
  $(document).ready(function(){
    $(".holder").height( $(".slide").height() );
  });
</script>

<script type="text/javascript">
  $(window).resize(function() {
    $(".holder").height( $(".slide").height() );
  });
</script>

但它只使用第一张幻灯片的高度，因此其他幻灯片被切断。

请使用 javascript 来帮助解决这个问题。

Answer 1

您可以遍历它们以获得最高的高度.slide。

function updateSlideHolderSize() {
    var max = 0;
    $(".slide").each(function () {
        max = Math.max(max, $(this).height());
    });
    $(".holder").height(max);
}

---

所以它会像这样进入你的应用程序：

<script type="text/javascript">
$(document).ready(updateSlideHolderSize);
$(window).resize(updateSlideHolderSize);

function updateSlideHolderSize() {
    var max = 0;
    $(".slide").each(function () {
        max = Math.max(max, $(this).height());
    });
    $(".holder").height(max);
}
</script>