Question

我是jQuery的新手。我有一个重复的div（.containingBox），它有三个内部div（.summary0，.summary1，.summary2）来保存数据。在summary0之后和summary2之前，我想显示一个垂直条。应该动态设置此栏的高度。在汇总div填满数据后，该值将从'containedBox'的'outerHeight'中获取。

.containingBox {
    float: left;
    width: 93%;
    background-color: white;
    padding: 5px;
    border: solid 1px #C8C8C8;
    margin: 10px;
    height: auto;
}
.summary0 {
    height: auto;
    width: 25%; 
    float: left;
    line-height: 1.5em;
    font-size: 14px; 
    font-family: Arial, Helvetica, sans-serif, OptimaLTStdBold;
    margin: 0px; 
    padding: 10px;
}

.summary1 {
    height: auto;
    width: 25%;
    float: left;
    line-height: 1.5em;
    font-size: 14px;
    font-family: Arial, Helvetica, sans-serif, OptimaLTStdBold;
    margin: 0px; 
    padding: 10px;
}

.summary2 {
    height: auto;
    width: 25%; 
    float: left;
    line-height: 1.5em;
    font-size: 14px;
    font-family: Arial, Helvetica, sans-serif, OptimaLTStdBold;
    margin: 0px;
    padding: 10px; 
}

.vLine {
    background-color:grey; 
    width:1px; 
    float:left;
    height:100px; 
 }

<div class="vLine"></div>

垂直线在硬编码时有效（How to make a vertical line in HTML）。到目前为止，我已经完成了以下工作：

$(document).ready(function(){
    $(".containingBox0").each(function(){
        txt = $(this).outerHeight();
        $(this).siblings(".vLine").css('height', txt);        
    });
});

核心问题是jquery的最后一行。容器div中有两个.vLine，但是我无法让分配工作。谢谢！

http://jsfiddle.net/isherwood/9Wshe/

Answer 1

您无法将值分配给返回多个元素的jquery选择器。你必须改变以下行：

$(this).children(".hrLine").css('height', txt);

等等;

$(this).children(".hrLine").each(function(){
   $(this).css('height', txt);
});

告诉我这是否适合你

更新：将$(this).siblings更改为$(this).children

JQuery - 将容器（父）div的高度分配给子元素（垂直条）

1 个答案: