我有一段代码,我试图动态地改变子元素的高度,我遇到了奇怪的事情。到目前为止,这是我的代码:
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
变量内联更改。是什么给了什么?
为什么第二段代码有效而第一段却没有?它们看起来几乎和我一样。
答案 0 :(得分: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);
});
});
答案 1 :(得分:1)
想出来。您必须每次在原始循环中重置高度,以便将新值推送到数组中。
$(window).on("resize", function () {
$(elem).children().each(function (i) {
$(this).css("height", "");
heights[i] = $(this).height();
});
});
为我解决了。
当您在另一个each
中设置高度时会出现问题,它会设置最大值。每次都需要删除内联高度以检索新值。