2012-04-27 67 views
2

我有一个列表如下:的jQuery即使身高抹灰李的

<ul id="list"> 
    <li>lorem</li> 
    <li>lorem</li> 
    <li class="last">lorem</li> 
    <li>lorem</li> 
    <li>lorem</li> 
    <li class="last">lorem</li> 
</ul> 

我见李漂到在3行如何使用jQuery来选择每行左边(3华里的)找到该行中的最大高度,然后将该行中的其他行设置为相同的高度?

这是我现在所拥有的,但它只看到李的整体,而不是单独的行。

var maxHeight = 0; 

$('ul#list li').each(function() { 
    maxHeight = $(this).height() > maxHeight ? $(this).height() : maxHeight; 
}).height(maxHeight); 

回答

4

打破元素成排第一,那么用户的逻辑上独立的每一行:

var items = $('ul#list li'); 
var total = items.length; 

for(i = 0; i < total; i+=3){ 
    var row = items.slice(i, Math.min(i + 2, total - 1)); 
    var maxHeight = 0; 
    row.each(function() { 
     maxHeight = $(this).height() > maxHeight ? $(this).height() : maxHeight; 
    }).height(maxHeight); 
} 
+0

工作就像一个魅力。谢谢。 – ATLChris 2012-04-27 11:12:27

-1

尝试这样的:

var getMaxHeight = function ($elms) { 
    var maxH = 0; 
    $elms.each(function() { 
     if ($(this).outerHeight() > maxH) { 
      maxH = $(this).outerHeight(); 
     } 
    }); 
    return maxH; 
}; 

var $li = $('#list li'); 
$li.height(getMaxHeight($li)); // Put this on load or doc.ready 
+0

我想运问的是如何调整每行中的项目相对于行中的其他项目而不是整个集合的大小。 – kroehre 2012-04-27 02:49:31

+0

是的,是我问的。我在问题中发布的代码与此完全相同。我正在寻找可以在每行基础上工作的内容。 – ATLChris 2012-04-27 11:05:46

0

如果你可以在容器设置为overflow: hidden,你可以做到这一点不使用JavaScript,通过使用一个非常大的padding-bottom和一个同样大的负margin-bottom(和保存底部的视觉填充物,将margin-bottom移近0以补偿)。例如:

#list { 
    overflow: hidden; 
} 
#list li { 
    padding-bottom: 1000px; 
    margin-bottom: -1000px; 
} 
-1

月这段代码可以帮助你......

$("#list li:nth-child(3n)").each(function(){ 
    var maxHeight = Math.max.apply(Math, $(this).children().map(function(){ return $(this).outerHeight(); }).get()); 
    $(this).children().each(function(){ 
     $(this).height(maxHeight); 
    }); 
});