Question

我有几个子元素具有不同的高度，并且能够在页面加载后更改高度，因为它们内部的内容将是动态的，其中一些将占用父级宽度的50％，一些将占用100％的父母宽度。我需要的是找到正确布局的所有子元素的高度，并将其应用于父元素，如果子元素有任何更改，则重新应用高度。我需要将高度应用于父元素的原因是让另一块jQuery工作。

我创建了一个小例子http://cdpn.io/hrbjw 以及显示代码http://codepen.io/julianvk/pen/hrbjw

的示例

如果这还不够清楚只评论哪个部分令人困惑。

Answer 1

我不确定我做对了，但是......

如果您的孩子的高度可以动态变化，并且您无法跟踪它何时发生，您可能需要创建一个监听器来检查它们的高度是否发生了变化。不幸的是，没有DOM事件，但你可以参考这个问题的解决方案Detecting when a div's height changes using jQuery。

一旦你有一些回调函数被调用，只要高度发生变化，你就必须重复你的孩子，达到他们的高度并做出你想要的改变。

修改

如果你知道什么是触发器，你可以使用像
这样的东西
function change_parent_height(){ $(".child").each(function() { child_height = $(this).height(); } //do something with the children heights //in this example, parent is gonna get the last child height $(".parent").height(child_height); } $(document).resize(change_parent_height); $(".child").on("hover click", change_parent_height);

Answer 2

使用.css（）

http://jsfiddle.net/8R4Lh/

$(".whatever").css("height", $(".child").css("height"));

虽然将父级设置为高度自动也应该这样做。

Answer 3

这可能类似于您打算做的事情：

http://codepen.io/anon/pen/CtBlq

Answer 4

我有一个类似的问题，我希望父母的高度与最高的子元素相匹配。我希望这个匹配在页面加载完成后立即发生，我只想将它应用于属于'.parent'类的元素。

我的jQuery代码如下：

$(window).bind("load", function() {
    adjust();
    function adjust() {
        $('.parent').each(function(i, parent_obj) {
            var maxHeight = 0;
            $(parent_obj).children().each(function(j, child) {
                maxHeight = ($(child).height() > maxHeight ? $(child).height() : maxHeight);
            });
            $(parent).css("min-height", maxHeight)
        });
    }
});

$（window）.bind（“load”，function（）{...}）;页面加载完成后执行该功能。上述函数的示例HTML代码如下所示：

<!--This section is affected by our jQuery script-->
<div class="parent">
    <div class="child-div1"><img src="image.jpg"/> </div>
    <img src="image2.jpg">
    <div class="child-div2"></div>
</div>

<!--This section is not affected-->
<div class="weird-uncle-bob">
    <div class="non-influencial-child">
        I can be as tall as I want to be. Bob is not gonna get taller.
    </div>
</div>

另外，请注意，这也有利于单独影响每个父元素。我有一个同时影响属于'.parent'类的所有元素的问题;不只是受影响的具体因素。这解决了这个问题！

jQuery找到子节点的高度并应用于父节点

4 个答案: