0

私はjQueryが初めてです。データを保持する3つの内部div(.summary0、.summary1、.summary2)を持つ繰り返しdiv(.containingBox)があります。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 には 2 つの .vLine がありますが、割り当てが機能しません。ありがとう!

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

4

1 に答える 1