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

时间:2014-10-12 12:19:27

标签: javascript jquery

我有这个结构:

<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或其他任何事情。

谢谢!

3 个答案:

答案 0 :(得分:5)

您可以使用.height

的函数重载
$('.box').height(function(){
    return $(this).parent().height();
});

答案 1 :(得分:1)

如果你真的必须使用jQuery:

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

JS Fiddle demo

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

.box {
    height: 100%;
}

JS Fiddle demo

不需要特殊的positiondisplay属性。

顺便提一下,对于简单的JavaScript解决方案:

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

JS Fiddle demo

参考文献:

答案 2 :(得分:0)

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