jquery - jQuery 偶数高度浮动 LI 的

Question

我有一个清单如下：

<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>

我让 li 在 3 行中向左浮动。如何使用 jQuery 选择每一行（3 li's）找到该行中的最大高度，然后将该行中的其他设置为相同的高度？

这就是我现在所拥有的，但它只将 li 视为一个整体，而不是单独的行。

var maxHeight = 0;

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

Answer 1

首先将元素分成几行，然后分别在每一行上使用您的逻辑：

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

Answer 2

如果您可以将容器设置为overflow: hidden，则可以在不使用 JavaScript 的情况下执行此操作，方法是使用非常大padding-bottom和同样大的负数margin-bottom（为了在底部保留视觉填充，请margin-bottom移近 以0进行补偿）。例子：

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

Answer 3

试试这个：

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

Answer 4

希望这段代码可以帮助你...

$("#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);
   });
});