jquery - 如何为每个容器div中的每组子div设置高度？

Question

我有许多容器（class =“sidebox”），每个容器的div都有不同的内容。

在某些情况下，我希望每个子div都是父div的100％高度，有时候会添加一个垂直分隔符样式。

为此，我将一个cfull类添加到子div，vcon添加到容器中，类为'sidebox'。

然后调用jquery函数：

var y = $('.cfull').parent('div.vcon').height();
    $(".cfull").height(y) ;

当只有一个实例时，将其子项div高度设置为侧箱的高度时，这非常完美。

如果我在html中添加第二个sidebox vcon并给其中一个孩子div其他内容。第二个sidebox子div获取从sidebox的第一个实例设置的高度

如何在class="sidebox vcon"容器div中设置每组子div的高度？

我希望这是有道理的。

到目前为止，这是我的工作示例，您会看到第二个侧箱儿童从第一个侧箱中获得style="height:#px"

http://bit.ly/jqueryheightissue

Answer 1

您正在做的事情称为隐式迭代。当你这样做时：

$('.cfull').height(y);

...您正在做的是将所有.cfull元素设置为仅一个高度值（y的当前值）。

您希望明确地遍历每个元素，可能使用.each()。

$('.cfull').each(function () {

    var self = $(this),
        container = self.parent('div.vcon');

    self.height(container.height());

});

但是，您应该能够使用纯CSS完成您想要实现的目标。你尝试过做这样的事吗？

.cfull {
    height : 100%;
}

Answer 2

您需要使用.cfull类循环遍历所有元素。实例：http://jsfiddle.net/QpEgX/5/

$('.cfull').each(function() {
    var y = $(this).parent('div.vcon').height();
    $(this).height(y) ;
});

Answer 3

var height = 0;
$('.cfull').each(function () {
  height = $(this).parent('div.vcon').height();
  $(this).height(height);
});