与JQuery等高的列

Question

我们可以将JQuery用于创建等高的列吗？如果是，如何？

谢谢

Answer 1

循环遍历每列，找到最高。然后全部设置到那个高度。

var maxHeight = 0; 
$(".column").each(function(){ 
    maxHeight = $(this).height() > maxHeight ? $(this).height() : maxHeight; 
}).height(maxHeight);​ 

在线演示：http://jsbin.com/afupe/2/edit

Answer 2

我张贴了类似的问题，前几天，这里是为我工作的一段代码。

*** #column_left，#column_center，#column_right：是应该具有相同高度的三列div。我想它可以使用更多或更少的列数。

<script type='text/javascript' 
src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script> 

<script type='text/javascript'> 
$(document).ready(function() { 

    // get the heights 
    l = $('#column_left').height(); 
    r = $('#column_right').height(); 
    c = $('#column_center').height(); 

    // get maximum heights of all columns 
    h = Math.max(c, Math.max(l, r)); 

    // apply it 
    $('#column_left').height(h); 
    $('#column_right').height(h); 
    $('#column_center').height(h); 
    }); 
</script> 

它是由用户“widyakumara”发布。我希望它也能帮助你。

Answer 3

@ktsixit您应该给所有列添加 类，而不是在此情况下使用唯一标识。然后，您可以一次计算并应用所有项目的最高高度。即使你没有或不能使用一个类，你至少应该使用变量来存储div ID引用。通过上面的代码，您可以解析DOM 6次。您至少可以通过使用变量将其减少到3个解析。

Answer 4

强烈推荐可链式插件方法。由于这种尖叫重用.. 可以使equalHeights具体到集合...

$.fn.equalHeights = function() { 
    var max = 0; 
    return this 
    .each(function(){ 
     var height = $(this).height(); 
     max = height > max ? height : max; 
    }) 
    .height(max); 
}; 
// don't combine collections unless you want everything same height.. 
$('.top-menu a').equalHeight(); 
$('footer a').equalHeight(); 

你可以采取更进了一步，并高度你，所以你可以使用高度或宽度，像这样采取财产...

$.fn.equalProp = function (prop) { 
    var max = 0; 
    return this 
    .each(function(){ 
     var oProp = $(this)[prop](); 
     max = oProp > max ? oProp : max; 
    }) 
    [prop](max); 
}; 

$('.top-menu a, .top-menu div').equalProp('height').equalProp('width');