私は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 がありますが、割り当てが機能しません。ありがとう!