jQuery查找子元素的高度并应用于父元素

jQuery find the height of children and apply to parent

本文关键字：元素 应用于 高度 查找 jQuery      更新时间：2023-09-26

我有几个子元素，它们将具有不同的高度，并且在页面加载后具有改变高度的能力，因为它们内部的内容将是动态的，其中一些将占用父元素宽度的50%，有些将占用父元素宽度的100%。我需要的是找到所有子元素的高度，当他们正确布局，并将其应用到父元素和高度被重新应用，如果有对子元素的任何变化。我需要对父元素应用height的原因是为了使另一个jQuery工作。

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

如果这还不够清楚，请注释哪部分令人困惑

我不确定我写对了，但是…

如果你的孩子的身高可以动态变化，你不能跟踪它何时发生，你可能需要创建一个监听器来检查他们的身高是否发生了变化。不幸的是，没有DOM事件，但你可以参考这个问题的解决方案，检测当一个div的高度变化使用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);

use .css()

http://jsfiddle.net/8R4Lh/

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

虽然将父元素设置为height auto也可以做到。

这可能与您想要做的类似:

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

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

我的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)
        });
    }
});

$(窗口)。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>

另外，请注意，这也有单独影响每个父元素的好处。我有一个问题，影响所有属于'的元素。同时为父类;不仅仅是受影响的特定元素。这就解决了这个问题!

相关文章：