jquery - How do i set the heights for each set of child divs within each container div?

Question

I have a number of containers (class="sidebox") with child divs each with varying amounts of content.

On some occasions I want the child divs to each be 100% height of the parent div, sometimes to add a vertical separator style.

To do this I add a class of cfull to the child divs and vcon to the container with the class of 'sidebox'.

Then call a jquery function:

var y = $('.cfull').parent('div.vcon').height();
    $(".cfull").height(y) ;

This perfectly when there is only one instance on and sets it's children div height to the height of the sidebox.

If I add a second sidebox vcon in the html and give one of it's child divs additional content. The second sidebox child divs get the height set from the first instance of the sidebox

How do I set the heights for each set of child divs in a class="sidebox vcon" container div?

I hope that makes sense.

Here's my working example so far, you'll see the second sidebox children have the style="height:#px" from the first sidebox

http://bit.ly/jqueryheightissue

Answer 1

What you're doing is called implicit iteration. When you do this:

$('.cfull').height(y);

... what you're doing is setting all .cfull elements to only one value of height (the current value of y).

You want to iterate through each element explicitly, maybe by using .each().

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

    var self = $(this),
        container = self.parent('div.vcon');

    self.height(container.height());

});

However, you should be able to do what you're trying to achieve using just plain CSS. Have you tried doing something like this?

.cfull {
    height : 100%;
}

Answer 2

You need to loop through all of the elements with a class of .cfull. Live example: http://jsfiddle.net/QpEgX/5/

$('.cfull').each(function() {
    var y = $(this).parent('div.vcon').height();
    $(this).height(y) ;
});