0

我有一段代码试图动态改变子元素的高度，但我遇到了一些奇怪的事情。到目前为止，这是我的代码：

var heights = [],
    tallest;
$(window).resize(function() {
    $(elem).children().each(function (i) {
        heights[i] = $(this).height();
        tallest = Math.max.apply(null, heights);
        $(this).height(tallest);
    });
});

所有这一切都是找到每个子元素的高度，将其推入一个数组，然后找到该数组中的最大值并尝试根据该值设置高度。人们会期望找到的每个子元素都会根据tallest变量值在调整大小时发生变化，但事实并非如此——它保持不变。但是，此代码有效：

var heights = [],
    number = 1000;
$(window).resize(function() {
    $(elem).children().each(function (i) {
        heights[i] = $(this).height();
        tallest = Math.max.apply(null, heights);
         $(this).height(number--);
    });
});

调整窗口大小时，该height属性与变量内联更改。number是什么赋予了？

为什么第二段代码有效而第一段无效？对我来说，它们看起来几乎是相同的代码。

4

2 回答 2

1

它不会立即分配最大值，因为您并没有真正计算最大高度。您必须让它为所有子元素运行以获得最高值。然后再次运行分配给每个孩子。

 var heights = [],
        tallest;
    $(window).resize(function() {
        $(elem).children().each(function (i) {
            heights[i] = $(this).height();
        });
        tallest = Math.max.apply(null, heights);
        $(elem).children().each(function (i) {
            $(this).height(tallest);
        });
    });
于 2013-08-14T18:01:11.017 回答
1

弄清楚了。您必须每次在原始循环中重置高度，以便将新值推送到数组中。

$(window).on("resize", function () {
    $(elem).children().each(function (i) {
        $(this).css("height", "");
        heights[i] = $(this).height();
    });
});

为我解决了。

当您在 other 中设置高度时，问题就来了each，它设置了最大值。您每次都需要摆脱内联高度来检索新值。

于 2013-08-14T19:08:07.743 回答