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

Question

我有许多带有子div的容器(class ="sidebox"),每个div都有不同的内容.

在某些情况下,我希望子div为每个父div的100%高度,有时添加垂直分隔符样式.

为此,我将一个类添加cfull到子div和vcon带有"sidebox"类的容器中.

然后调用jquery函数:

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

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

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

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

我希望这是有道理的.

到目前为止,这是我的工作示例,您将看到第二个侧箱子的孩子style="height:#px"从第一个侧箱

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%;
}