Запустить сценарий jQuery для нескольких элементов одного и того же типа с разным контентом (размеры)

Question

Я пытаюсь запустить небольшой скрипт jQuery, чтобы центрировать мои изображения в соответствии с рядом с ним текстовым блоком.

Я использую 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'}); 

}); 

В основном то, что это is установлен столбец, который содержит изображение на той же высоте, что и родительская строка, тогда он устанавливает margin-top изображения в размере половины размера столбца минус в два раза меньше размера изображения.

Он работает для первого столбца, но затем применяет ту же самую высоту/маржу к остальным строкам.

Чтобы увидеть полную вещь в действии смотрите это FIDDLE (jsFiddle окна результатов должно быть достаточно широкой для изображения, чтобы быть слева/справа от текста, если слишком маленькое изображение будет просто перейти на выше/ниже текст).

Что мне нужно, так это сценарий для запуска в каждой отдельной строке и быть готовым обрабатывать больше строк, если они появятся позже.

Cheers!

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, чтобы сделать его лучше отражать то, что он на самом деле содержится)

Одна из ключевых особенностей функции getter/setter jQuery (css, html, attr, val и т. Д.) Заключается в том, что они assymetrical: Когда вы находитесь значение - значение, установленное на всех элементах в наборе jQuery, но когда вы получаете значение, они получают его только от , начиная с элементов в наборе. Так что ваш код делает $('.row').height() получал высоту первых подряда, а затем код приложения, что (center.height(row), centered.css({"margin-top": top + 'px'})) применяет значения к всем.center и .centered элементов.