5

在上一个问题<li>中，我在页面上的 UL 组的各个标签上设置了 Equal heights 。但现在我意识到，为了更好的主题化，我想<li>在 UL 组内的一组标签上设置最高高度，并将其设置为其各自的父级<ul>本身，以便更好地对我的页面进行主题化。我在这里有一个新的小提琴，我尝试<li>在 UL 组中找到最高高度并将其设置为 UL。

问题仍然是特异性。第一个 UL 组的最高高度<li>被设置为<ul>页面上的所有标签。UL 组（第 1 行）中最高<li>的高度为 260px，第 2 行的高度为 156px。但是，页面上的两个 UL 标记仍设置为 260 像素。UL 将在页面上增长，因此我希望代码是可扩展的，而不必在 JQuery 中指定每一行。到目前为止，我已经尝试过：

// get the height of the tallest LI within each UL group
    var max = Math.max.apply(Math, $(".item-list ul li").map(
        function(){
          return $(this).height();
        }
      ));

// now render the height in each parent UL

    $(".item-list ul").each(function() {
      $(this).find(".item-list ul").height(max);
    });

...但第二部分不起作用。这有效，但...

$(".item-list ul").height(max);

...它将最高的高度<li>放在所有 UL 标签的页面上。理想情况下，最终的 HTML 应该是：

<div class="item-list row-1">
<ul style="height: 260px;">
etc...

<div class="item-list row-2">
<ul style="height: 156px;">
etc...

基于下面这个的工作版本

4

3 回答 3

12

如果我理解正确，您应该在循环中执行max操作。.each()

function thisHeight(){
    return $(this).height();
}

$(".item-list ul").each(function() {
    var thisULMax = Math.max.apply(Math, $(this).find("li").map(thisHeight));
    $(this).height(thisULMax);
});

我还将 map 函数设为命名函数，以便您可以重用它。

这里有几个更清洁的解决方案。

这个传递一个函数以height()将其用作迭代器。缩短了一点。

function thisHeight(){
    return $(this).height();
}

$(".item-list ul").height(function() {
    return Math.max.apply(Math, $(this).find("li").map(thisHeight));
});

这是另一种使用方式.reduce()，尽管它需要 IE8 及更低版本的填充程序。

function maxHeight(max, elem) {
    var h = $(this).height();
    return max > h ? max : h;
}

$(".item-list ul").height(function() {
    return $(this).find("li").toArray().reduce(maxHeight, 0);
});
于 2012-11-11T16:09:44.913 回答
2

似乎很复杂？

$(".item-list ul").each(function(idx, elm) {
     var LIheight = 0;
     $('li', elm).each(function() {
         if ($(this).height() > LIheight) LIheight = $(this).height();
     }).height(LIheight);
});
于 2012-11-11T16:24:13.590 回答
0

既然你有两个<ul>“.item-list”类标签，为什么不试试这个：

$(".item-list ul").eq(0).height(max);

这只会设置 HTML 中第一个标签的高度。

于 2012-11-11T16:13:29.150 回答