JQuery - assign height of container (parent) div to child element (vertical bar)

Question

I am new to jQuery. I have a repeating div (.containingBox) which has three internal divs (.summary0, .summary1, .summary2) which hold the data. After summary0 and before summary2 I would like to show a vertical bar. This bar's height should be set dynamically. The value will be taken from the 'outerHeight' of 'containingBox' after the summary divs have filled up with data.

.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>

The vertical line works when hard coded (How to make a vertical line in HTML). So far I have done the following:

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

The central problem is the last line of jquery. There are two .vLine in container div but I can't get the assignment to work. Thanks!

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

Answer 1

you can't assign the value to a jquery selector that returns multiple elements. you have to change the line that reads:

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

to something like;

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

tell me if this works for you

Update: changed $(this).siblings to $(this).children