Question

我的标记类似于this。现在在此链接中，您可以看到li中有3个ul。在该标记中，您可以看到li类名首先出现，最后它被命名为{{ 1}}。 li类名称last是行的最后一个li元素。现在按照我的要求，我连续拿了3个li，然后在另一行接下来的3个li，依此类推我的标记。我有大约100个li就像这样。

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

逻辑将是这样的东西，它将在一行中看起来意味着连续三个li并且其高度大于其他两个它将声明一个作为最高高度并且使另外两个li到达该高度。通过这种方式，我们可以使所有内容按高度对齐。任何帮助和建议都会非常值得赞赏。

注意

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

Answer 1

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

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

jQuery使所有容器的高度相等

1 个答案: