Jquery Tumblr Each() Solution?

Question

The following code is going to be used for a Tumblr blog, to center a div (50px in height) vertically over various images. As the images will have different heights, the code should determine the heights of the images, plus 50, then divided by 2, this will vertically align the div over the images precisely:

$(window).load(function(){
     function HeightCalc(x,n){

        var Calc = ($(x).height()+50)/2; // Calculate height of images
        $(n).css({"bottom":Calc}); // Move divs according to calc. total
        });

    }
    HeightCalc(".index-page .Photos a img",".Photos > a > #HoverImg:last-child");
});

The code above works, however, it only calculates the first image on the page, then ALL the divs move according to that value. Each image should be calculated and have those values move each div individually.

Here is the HTML:

    <div class="Photos">
         <a>
             <img src="#" />
             <div class="#HoverImg">
         </a>
    </div>

Note: I've tried using $(x).each(), but it does not work, the divs do not move at all. I thought this would be the solution, to iterate over all images, and all divs, however it didn't seem to work.

Answer 1

If I my understanding of your question is right, this should work. I assumed that .Photos > a > #HoverImg:last-child comes inside each .index-page .Photos a img .

function HeightCalc(x, n) {
    $(x).each(function() {
        var Calc = ($(this).height() + 50) / 2; // Calculate height of images
        $(this).siblings(n).css({
            "bottom": Calc
        }); // Move divs according to calc. total
    });
}
HeightCalc(".index-page .Photos a img", ".HoverImg");