jQuery each() getting same results

Question

Basically, I'm trying to: get the parent's height, subtract the child's height, divide the result by 2, floor it, then use the result as the value for the child's top margin. It works fine, but only on the first div. The other ones get the same value.

Here's the jQuery:

function update() 
{
    var container = $('.container');
    var inside = $('.inside');

    inside.each(function () 
    {
        var cont_height = container.outerHeight();
        var inside_height = inside.outerHeight();
        var x = (cont_height - inside_height) / 2,
            x = Math.floor(x);
        $(this).css("marginTop", x);
    });
}

$(document).ready(function () 
{
    update();
});

$(window).resize(function () 
{
    update();
});

I apologize in advance if this has been answered before. I tried to look, but I can't seem to come up with the right keywords.

Here's the fiddle: http://jsfiddle.net/y29S4/4/

Thank you very much.

Answer 1

You are defining inside_height as inside and it's in global scope, so it takes only first element, you need to change code to:

var inside_height = $(this).outerHeight();