Jquery Tumblr Each() 解决方案？

Question

以下代码将用于 Tumblr 博客，使 div（高度 50 像素）在各种图像上垂直居中。由于图像将具有不同的高度，代码应确定图像的高度，加上 50，然后 divided by 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 中每个 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");

Jquery Tumblr Each() 解决方案？

Jquery Tumblr Each() Solution?

javascript

jquery

height