每个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 sollution：

[].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()) 
    }); 
});