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

【问题标题】：JQuery - assign height of container (parent) div to child element (vertical bar)JQuery - 将容器（父）div的高度分配给子元素（垂直条）
【发布时间】：2013-07-24 16:30:46
【问题描述】：

我是 jQuery 的新手。我有一个重复的 div (. containsBox)，它有三个内部 div (.summary0、.summary1、.summary2) 来保存数据。在 summary0 和 summary2 之前我想显示一个竖线。该条的高度应动态设置。在摘要 div 填满数据后，该值将从“containingBox”的“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/

【问题讨论】：

请使用包含 . containsBox0 和任何其他必需元素的 HTML 更新我附加到您的问题的小提琴。

标签： jquery siblings outerheight

【解决方案1】：

您不能将值分配给返回多个元素的 jquery 选择器。您必须更改以下内容：

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

类似的东西；

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

告诉我这是否适合你

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

【讨论】：

进行了修改，但无法开始工作。我明白你关于多个元素的观点。
已解决。应该是“孩子”而不是“兄弟姐妹”。还将“.vLine”高度属性更改为 100%。终于到了。