每個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()) 
    }); 
});