javascript - 在具有不同内容(大小)的相同类型的多个元素上运行 jQuery 脚本

Question

我正在尝试运行一个小的 jQuery 脚本来根据图片旁边的文本 block 将我的图片居中。

我正在使用 foundation 5这就是为什么我不得不使用 jQuery 脚本来覆盖 CSS 而不是 vertical-align: middle 等...

脚本如下:

$(function(){
    var row = $('.row').css("height");

    var center = $('.center');
    center.height(row);

    var centered = $('.centered');
    var imgSize = parseInt(centered.css("height")) / 2;
    var rowInt = parseInt(row);
    var top = (rowInt / 2) - imgSize;
    centered.css({"margin-top" : top + 'px'});

});

基本上，它所做的是将保存图像的列设置为与父行相同的高度，然后将图像的 margin-top 设置为列大小的一半 < strong>减去图像大小的一半。

它适用于第一列，但随后对其余行应用相同的高度/边距。

要查看全部内容，请参阅此 FIDDLE (jsFiddle 结果窗口必须足够宽以使图像位于文本的左侧/右侧，如果太小的图像只会移动到文本的上方/下方)。

我需要的是在每一行上运行的脚本，并准备好处理更多行(如果它们稍后会出现)。

干杯!

Answer 1

您需要对每一 行执行此操作，而不是使用单个计算。所以遍历行，在每一行内工作:

$(function(){
    $('.row').each(function() {
        var thisRow = $(this);
        var rowHeight = thisRow.css("height");

        var center = thisRow.find('.center');
        center.height(rowHeight);

        var centered = thisRow.find('.centered');
        var imgSize = parseInt(centered.css("height")) / 2;
        var rowInt = parseInt(rowHeight);
        var top = (rowInt / 2) - imgSize;
        centered.css({"margin-top" : top + 'px'});
    });
});

Updated Fiddle (我还将 row 变量的名称更改为 rowHeight 以使其更好地反射(reflect)它实际包含的内容)

关于 jQuery 的 getter/setter 函数的关键之一(css、html、attr、val , 等等)是因为它们是不对称的:当您设置一个值时，它们会设置在 jQuery 集合中的所有元素上，但是当您< em>获取一个值，他们只从集合中的第一个元素获取它。所以你的代码执行 $('.row').height() 是获取 first 行的高度，然后你的代码应用它 (center. height(row), centered.css({"margin-top": top + 'px'})) 将值应用于所有 .center 和 .centered 元素。