jQuery使所有容器的高度相等

Question

我的标记类似于this。现在在此链接中，您可以看到ul 中有3 个lis。在该标记中，您可以看到li 类名首先命名为last。 li 类名 last 是该行的最后一个 li 元素。现在根据我的要求，我已经连续取了 3 li，接下来的 3 li 在另一行，依此类推。我有大约 100 li 像这样。

现在在该标记中，您可以在 h3 标记中看到标题的长度不同，它只是扰乱了内容的高度。我不能为任何容器分配任何恒定的高度，因为标题长度在每个项目中都会非常长。所以有人可以在 jQuery 中告诉我如何使每一行中所有其他容器的高度相同。

逻辑将类似于它会在一行内查看，这意味着一行中的三个 li 并且其高度大于其他两个，它将声明一个为最高高度，并使其他两个 li 达到该高度。通过这种方式，我们可以使所有内容按高度对齐。任何帮助和建议都将不胜感激。

注意

我无法更改我的标记。它将保持不变。

Answer 1

此代码解决了您的要求，但没有排列 LI 内部的按钮，这是一个不同的问题。也许您可以将按钮放在 LI 的底部，使用 CSS 相对/绝对定位来排列它们。

http://jsfiddle.net/NWC2Q/10/

$(function() {
  var items = $("ul.products li");
  var rows = items.length / 3;
  if (rows <= 0)
    rows = 1;

  for(var r=0;r<rows;r++)
  {
    normalizeRowHeight(r, items);
  }    
});

function normalizeRowHeight(row, itemSet)
{
  var maxRowHeight = 0; 
  var startIndex = (row == 0 ? 1 : (row + 1) * 3) - 1;
  var endIndex = (startIndex + 2) > itemSet.length ? itemSet.length - 1: (startIndex + 2);

  rowItems = itemSet.slice(startIndex, endIndex);

  var maxRowHeight = Math.max.apply(null, rowItems.map(function(i,e) {
    return $(e).height();
  }).get());

  rowItems.each(function(i) {
    $(this).css('height', maxRowHeight + "px");
  });  
}