jquery - 将父 div 设置为绝对子 div 高度
问题描述
我有多个 .parent div,每个 div 都包含一个绝对定位的 .child div。我设法使用以下代码将 .parent 的高度扩展到 .child 的高度。
然而,这使得每个 .parent 都具有相同的高度,即站点中最大的 .child 的高度。我需要每个 .parent 只将其高度扩展到他们自己的 .child 而不是更大。
有什么建议么?
function parentHeight(){
divHeight = $('.parent .child').height();
$('.parent').css({'height' : divHeight});
}
parentHeight();
解决方案
尝试使用jQuery.each
function parentHeight(){
$('.parent .child').each((i,el) => {
$(el).closest(".parent").css({'height' : $(el).height()})
});
}
parentHeight();
.parent {
background-color: blue;
width: 100px;
display: inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent"><div class="child" style="height:200px">A</div></div>
<div class="parent"><div class="child" style="height:300px">B</div></div>
<div class="parent"><div class="child" style="height:400px">C</div></div>