jQuery：將<section>的高度設置爲所有孩子的身高？

Question

我有這個...

<section class="cat"> 
    <article class="layer"></article> 
    <article class="layer"></article> 
    <article class="layer"></article> 
    <article class="layer"></article> 
</section> 

<section class="cat"> 
    <article class="layer"></article> 
    <article class="layer"></article> 
    <article class="layer"></article> 
</section> 

我想每個section.cat的高度設置爲所有兒童的身高。 我想用jQuery來做到這一點，所以我在所有的瀏覽器兼容。好像是沒有辦法將它與我的article.layer s的設置爲display:table純CSS ...

article.layer { 
    position: relative; 
    display: table; 
    height: 100%; 
    width: 100%; 
} 

所以所有的文章都是100％的當前視作爲我body和html高度設置爲100％身高也是如此。

現在section.cat設置爲display:inline，它適用於大多數瀏覽器，但不適用於Safari 5.0。

section.cat { 
    display:inline; 
} 

因此，因此我想用jQuery來做到這一點，進去section.cat每個孩子的高度和高度設置爲這個值。否則，section.cat s的高度爲0，並且如上所述，Safari 5.0以某種方式無法處理值display:inline。

謝謝！

Answer 1

我建議你找到相當於css的解決方案，但如果你想要jQuery解決方案，那麼它就是這樣。

var totalHeight; 
$(".cat").each(functon(){ 
    totalHeight = 0; 
    $(this).children(".layer").each(function(){ 
     totalHeight += $(this).height(); 
    }) 
    $(this).height(totalHeight); 
});