垂直對齊 - 基礎5 - 簡單的Javascript

Question

我已經使用瞭解釋爲here(js.fiddle link)的技術來實現頁面上某一節的垂直對齊。

我的問題是我想在我的頁面的不同部分重複使用這種相同的技術。

目前這個工作，但顯然第一個實例的高度，然後應用到一個完全無關的部分在別的地方，並沒有實現垂直對齊。有人可以幫助我修改js（也許使用'this'）以允許使用相同的代碼將高度應用於頁面不同部分中的不同元素嗎？

或者每次我想使用它時，是否必須用不同的var /類名複製此代碼？下面

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(); 

• 每（）爲每個匹配的元素運行功能
• $（ 「...」，這一點）可確保變化目前排內