()解决方案？

Question

下面的代码将用于Tumblr博客，将div (高度50 in )垂直地集中在各种图像上。由于图像有不同的高度，代码应该确定图像的高度，加上50，然后除以2，这将使div在图像上精确地对齐：

$(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");
});

上面的代码可以工作，但是，它只计算页面上的第一个图像，然后所有的div都根据这个值移动。应该计算每个图像，并让这些值分别移动每个div。

下面是HTML：

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

注意:我尝试过使用$(x).each()，但是它不起作用，div根本不动。我认为这将是解决方案，迭代所有的图像，和所有的div，但它似乎不起作用。

Answer 1

如果我对你的问题的理解是正确的，这应该是可行的。我以为.Photos > a > #HoverImg:last-child会出现在每个.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");