每个div获得父级的高度 - jQuery方法

Question

我有这个结构：

<div class="container" style="height:(variable height)">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>
<div class="container" style="height:(variable height)">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>
<div class="container" style="height:(variable height)">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>

所以我需要每个.box获得父.container的高度，它与另一个具有不同的高度，并且会有所不同。

我只需要jQuery方法，没有CSS因为我不想使用absolute位置，table-cell或其他任何事情。

谢谢！

Answer 1

您可以使用.height

的函数重载

$('.box').height(function(){
    return $(this).parent().height();
});

Answer 2

如果你真的必须使用jQuery：

$('.container').each(function(){
    $(this).children().height($(this).height);
});

JS Fiddle demo

值得注意的是，如果在height元素上设置了.container，那么您可以简单地指定：

.box {
    height: 100%;
}

JS Fiddle demo

不需要特殊的position或display属性。

顺便提一下，对于简单的JavaScript解决方案：

[].forEach.call(document.querySelectorAll('.container'), function (c) {
    [].forEach.call(c.children, function (b) {
        b.style.height = c.style.height;
    });
});

JS Fiddle demo

参考文献：

• JavaScript的：
  • Array.prototype.forEach()。
  • Function.prototype.call()。
  • ParentNode.children。
• jQuery的：
  • children()。
  • each()。
  • height()。

Answer 3

$(function(){
  $('.container').each(function(i,e){
    $(this).find('.box').css('height',$(this).height())
  });
});