Question

我想要实现的目标：

每个ul.container的

- ＆gt;找到最大的li高度 - ＆gt; 添加25px - ＆gt;将新高度应用于容器内的所有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;

查看Demo

Answer 3

我认为你需要看一下这个帖子。 jQuery - how to wait for the 'end' of 'resize' event and only then perform an action?

您需要在调整大小事件结束时调用它。

希望它有所帮助！

Answer 4

只有在newHeight＆gt;时才需要增加高度。 listHeight，我想。

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

4 个答案: