重复类容器取最后一个子位置的高度和高度

Question

我有一个重复的 div 容器 class="content" ，其中包含绝对定位的 div。

.content{
   width: 960px;
   margin: 0 auto;
   padding-bottom: 20px;
   position: relative;
   overflow: auto;
}

 .article0{
   width: 300px;
   position: absolute;
}

 .article1{
   width: 230px;
   position: absolute;
   top: 80px;
}

 .article2{
   width: 230px;
   position: absolute;
}

 .article3{
   width: 230px;
   position: absolute;
   margin-bottom: 20px;
   top: 500px;
}

据说容器 class="content" 在同一个页面中重复了很多次：

<div class="content">
<div class="article1"></div>
<div class="article2"></div>
<div class="article3"></div>
</div>

我要做的是为容器提供每个具有类 .content 的容器中最后一个子项的高度和顶部位置。我已经尝试了下面的代码，但没有任何结果，容器始终只获得相同的高度值，我猜只能来自最后一个或第一个容器的最后一个孩子？想不通！

$(function(){
var $box = $('.content');
var lastChildPos = $(':last-child', $box).position().top;
var lastChildHeight = $(':last-child', $box).height();

$box.height(lastChildPos + lastChildHeight);

});

Answer 1

enter code here如果有多个实例，您将需要这样的东西：

$('.content').each(function(){

    var lastChildPos = $(':last-child', $(this)).position().top;
    var lastChildHeight = $(':last-child', $(this)).height();

    $(this).height(lastChildPos + lastChildHeight);

});

这样它将它应用到盒子的每个实例，$(this) 获取与每个容器相关的变量。

注意：:last-child 将选择父容器中类型的最后一个子级。也许你想试试：

var lastChildPos = $(this).find('div:last-child').position().top;