jQuery偶数高度浮动LI'；s

我的名单如下：

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

试试这个：

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

---

如果可以将容器设置为

overflow:hidden

，则可以在不使用JavaScript的情况下执行此操作，方法是使用非常大的

padding bottom

和同样大的负

margin bottom

（要在底部保留视觉填充，请将

margin bottom

移近

0

以进行补偿）。例如：

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

---

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

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

var items=$（'ul#list li'）；
var总计=项目长度；
对于（i=0；imaxHeight？$（此）.height（）：maxHeight；
}).高度（最大高度）；
}

愿此代码能帮助您

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

---

我想op是问如何调整每行中的项目相对于行中其他项目的大小，而不是整个集合。是的，这是我要问的。我在问题中发布的代码与此完全相同。我正在寻找的东西，将在每行的基础上工作。工作像一个魅力。非常感谢。

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