jQuery动态设置元素的递增高度

Question

我要实现的目标 ：

对于每个ul.container >查找最大的li高度-> 向其添加 ul.container >将新的高度应用于容器中的所有li 。

我也需要在窗口调整大小时进行计算。

问题 ：

尽管这在页面加载时有效，但是在调整浏览器窗口的大小时，高度在每次循环时都会增加25px。 我似乎无法弄清楚我在做什么错。

我的代码 ：

function listHeight() {

    $("ul.container").each(function () {

        var listHeight = 0;
        var newHeight = 0;

        $("li", this).each(function () {

            newHeight = $(this).height();

            if (newHeight > listHeight) {

                listHeight = newHeight;
            }
        });

        $("li", this).height(listHeight += 25);
    });
}

listHeight();

$(window).resize(function () {
    listHeight();
});

JSFiddle ： http : //jsfiddle.net/upsidown/VtypM/

提前致谢！

Answer 1

高度增加是因为您在第一次运行中设置了高度。 此后，高度保持为“最大高度” + 25，并为其增加25。 为了防止这种情况，只需将元素的高度重置为自动。

function listHeight() {
    $("ul.container").each(function () {
        var listHeight = 0;
        var newHeight = 0;

        $("li", this).each(function () {
            var el = $(this);
            el.css('height', 'auto');
            newHeight = el.height();

            if (newHeight > listHeight) {
                listHeight = newHeight;
            }
        });

        $("li", this).height(listHeight += 25);
    });
}

listHeight();

$(window).resize(function () {
    listHeight();
});

为了获得更好的性能，我建议您对函数调用进行去抖动/调节。

Answer 2

您需要添加

$("li", this).height("auto");

后

var listHeight = 0;
var newHeight = 0;

查看演示

Answer 3

我认为您需要查看此线程。 jQuery-如何等待“调整大小”事件的“结束”，然后才执行操作？

您需要在resize事件结束时调用它。

希望能帮助到你！

Answer 4

我认为只有在newHeight> listHeight时才需要增加高度。