Javascript 设置一个变量，该变量在每个子元素上发生变化

Question

这似乎是一个容易回答的问题，但我已经为此苦苦挣扎了一段时间。

首先让我解释一下我要实现的目标。

我有一个图像库，我希望每个图像在其容器内垂直居中。这些图像具有不同的形状、大小和纵横比，因此我的代码需要针对其中的每个图像进行变化。这是我目前所拥有的:

<div id="cbp-fwslider" class="cbp-fwslider">
    <img src="images/large/1.jpg" alt="img01"/>
    <img src="images/large/2.jpg" alt="img02"/>
    <img src="images/large/3.jpg" alt="img03"/>
</div>

这是我的 javascript:

var $img = $('div#cbp-fwslider img');
var ih = $img.height();
var $div = $('div#cbp-fwslider');
var dh = $div.height();
if (dh > ih) {
    var dif = (dh - ih);
    $img.css('margin-top', + dif / 2 + "px");
}

现在，这部分起作用了。它所做的是计算正确的“margin-top”，使第一个图像在容器中垂直居中，然后将其应用于所有相关的图像。我毫不怀疑这是因为我已将 javascript 设置为对所有图像设置相同的“margin-top”。

我的问题是，我如何设置一个变量来让它对我放入我的画廊的所有元素单独执行此操作？

如果这是一个我可以在其他地方找到答案的基本问题，请原谅我，当涉及到 javascript 时，我的耳朵已经湿透了。

此外，如果有人知道实现我想要的目标的更简单/更有效的方法，那么如果您能为我指明正确的方向，那就太好了。

我必须提醒容器具有动态高度，所有图像也是如此。由于画廊运作的性质，我不能使用绝对定位和 THIS技术似乎也不起作用。

在此先感谢您的帮助。

Answer 1

您需要在每张图片上单独运行您的代码，而不是在图片集合上运行。您可以通过使用 each 循环遍历集合来执行此操作:

$('div#cbp-fwslider img').each(function(){
    var $img = $(this);
    var ih = $img.height();
    var $div = $('div#cbp-fwslider');
    var dh = $div.height();
    if (dh > ih) {
        var dif = (dh - ih);
        $img.css('margin-top', + dif / 2 + "px");
    }
});