Вертикальное выравнивание - Основание 5 - Простой Javascript

Question

Я использовал описанную технику here(js.fiddle link), чтобы добиться вертикального выравнивания для раздела на моей странице.

Проблема заключается в том, что я хотел бы повторно использовать эту технику на другой части моей страницы.

На данный момент это работает, но, очевидно, высота первого экземпляра затем применяется к совершенно несвязанной части где-то в другом месте, а вертикальное выравнивание не достигается. Может ли кто-нибудь помочь мне с изменением js (возможно, с помощью этого?), Чтобы позволить использовать тот же код для применения высоты к различным элементам в разных частях моей страницы?

Или мне нужно дублировать этот код с разными именами var/class каждый раз, когда я хочу его использовать?

Фрагменты кода ниже

HTML

<div class="row row_v_align"> 
    <div class="small-3 columns column_v_align"> 
    <div class="v_align"><img src="spade.png"></div> 
    </div> 
    <div class="small-9 columns"> 
    <h3>Title</h3><p>Content</p> 
    </div> 
</div> 
<div class="row row_v_align"> 
    <div class="small-3 columns column_v_align"> 
    <div class="v_align"><img src="bullsEye.png"></div> 
    </div> 
    <div class="small-9 columns"> 
    <h3>Title</h3><p>Content.</p> 
    </div> 
</div> 

CSS

.row_v_align { 
    display: table; 
} 
.v_align { 
    display: table-cell; 
    vertical-align: middle; 
} 

JS

$(window).on("resize", function() { 
    var rowHeight = $(".row_v_align").height(); 
    console.log(rowHeight); 
    $(".column_v_align").height(rowHeight); 
    $(".v_align").height(rowHeight); 
}).resize(); 

Answer 1

Я тестировал код ниже с скрипкой вы связаны между собой.

$(document).ready(function(){ 
    $(".row").each(function(){ 
     var rowHeight = $(this).height(); 
     console.log(rowHeight); 
     $(".column", this).height(rowHeight); 
     $(".v_align", this).height(rowHeight); 
    }); 
}); 

Так что для вас это должно работать:

$(window).on("resize", function() { 
    $(".row_v_align").each(function(){ 
    var rowHeight = $(this).height(); 
    console.log(rowHeight); 
    $(".column_v_align", this).height(rowHeight); 
    $(".v_align", this).height(rowHeight); 
    }); 
}).resize(); 

• каждый() функция запуска для каждого элемента
• $ ("...", это) гарантирует, что изменения сделанное внутри текущего ряда