每个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小提琴演示。

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

.box {
    height: 100%;
}

JS小提琴演示。

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

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

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

JS小提琴演示。

引用：

• JavaScript：
  • Array.prototype.forEach() .
  • Function.prototype.call() .
  • ParentNode.children .
• j查询：
  • children() .
  • each() .
  • height() .

Answer 3

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