0

我是 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>

垂直线在硬编码时有效（如何在 HTML 中制作垂直线）。到目前为止，我已经完成了以下工作：

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

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

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

4

1 回答 1

1

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

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

类似的东西；

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

告诉我这是否适合你

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

于 2013-07-23T15:15:03.883 回答