Question

我使用这个jQuery函数使<li>具有相同的高度。

function equalHeight(group) {
 var tallest = 0;
 group.each(function(index) {
  var thisHeight = $(this).height();
  if(thisHeight > tallest) {
   tallest = thisHeight;
  }
 });
 group.height(tallest);
}

我的问题是他们占据了最高的一个。

我的<li>以3行（3rowsx3列）显示。因此，如果一行的<li>具有较小的高度，则它们会获得最高的元素高度而且浪费空间。

有没有办法让脚本检查每一行中最高的<li>？

提前谢谢。

Answer 1

听起来像你可能想要采用实用的方法并使用<table>进行布局。它可能在语义上不正确，但使用javascript来解决CSS中的限制并不是更好。

Answer 2

经过多次尝试后，我设法写了一个脚本，找到每行中最高的元素并将其应用到行的其他元素

function applyEqualHeights(group,itemsPerRow) {
var tallest = 0;
var rows = Math.ceil(group.length/itemsPerRow);
for(var i = 1;i<rows+1;i++) {
    if(i==1) {
        tallest = 0;
        var rowItems = group.filter(":lt("+i*itemsPerRow+")");
    } else {
        tallest = 0;
        var rowItems = group.filter(":lt("+i*itemsPerRow+")").filter(":gt("+((i*itemsPerRow)-(itemsPerRow+1))+")");
    }
    rowItems.each(function() {
        var thisHeight = $(this).height();
        if(thisHeight > tallest) {
            tallest = thisHeight;
        }
    });
    rowItems.height(tallest);
}

}

jQUery相等列按行更改

2 个答案: