每个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 。
• jQuery的：
  • children() 。
  • each() 。
  • height() 。

Answer 3

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