Question

I have a repeated div container class=”content” which contains absolute positioned divs.

.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;
}

As is said the container class=”content” is repeating in the same page many times:

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

What i’m trying to do is give the container the height and top position of the last child in each container with class .content. I have tried the below code but without any result, the containers keep getting only the same height value, i guess only from the last child of the last or first container? Can’t figure out!

$(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 hereIf there is multiple instances you will need something like this:

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

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

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

});

That way it applies it to each instance of box, and $(this) gets the variables in relation to each container.

Note: :last-child will select the last child of a type within a parent container. Maybe you want to try:

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