Question

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

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变量内联更改。是什么给了什么？

为什么第二段代码有效而第一段却没有？它们看起来几乎和我一样。

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

Answer 2

想出来。您必须每次在原始循环中重置高度，以便将新值推送到数组中。

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

为我解决了。

当您在另一个each中设置高度时会出现问题，它会设置最大值。每次都需要删除内联高度以检索新值。

设置高度不随jQuery内联

2 个答案: