jquery - 爲每2或3個元素設置高度

Question

我在頁面上有幾個div，列數爲2，因此每2個div需要相同的高度。據我可以告訴插件可用於強制相同的高度做所有元素相同的高度，我只需要每一對是相同的高度。

我的標記看起來像這樣

等

我有以下的jquery其工作原理，但我相信這是可以做到更容易

{ 
    var rowOneHeight = Math.max($('div.large:eq(0)').height(),$('div.large:eq(1)').height()); 
    $('div.large:eq(0)').css('min-height', rowOneHeight); 
    $('div.large:eq(1)').css('min-height', rowOneHeight); 

    var rowTwoHeight = Math.max($('div.large:eq(2)').height(),$('div.large:eq(3)').height()); 
    $('div.large:eq(2)').css('min-height', rowTwoHeight); 
    $('div.large:eq(3)').css('min-height', rowTwoHeight); 

    var rowThreeHeight = Math.max($('div.large:eq(4)').height(),$('div.large:eq(5)').height()); 
    $('div.large:eq(4)').css('min-height', rowThreeHeight); 
    $('div.large:eq(5)').css('min-height', rowThreeHeight); 

}

它也需要與一組thr完成相同的工作ee divs。 感謝

Answer 1

你可以做一個循環與.slice()來遍歷套2，像這樣：

var elems = $("div.large"); 
for(var i = 0; i < elems.length; i+=2) { 
    var divs = elems.slice(i, i+2), 
     height = Math.max(divs.eq(0).height(), divs.eq(1).height()); 
    divs.css('min-height', height); 
} 

---

或者，更普遍的做法，因爲你想與3做還有，這裏是一個插件形式：

$.fn.setMinHeight = function(setCount) { 
    for(var i = 0; i < this.length; i+=setCount) { 
    var curSet = this.slice(i, i+setCount), 
     height = 0; 
    curSet.each(function() { height = Math.max(height, $(this).height()); }) 
      .css('min-height', height); 
    } 
    return this; 
}; 

然後，你可以這樣調用：

$("div.large").setMinHeight(2); //or 3, etc 

You can test it out here。