JQuery - назначить высоту контейнера (родителя) для дочернего элемента (вертикальная черта)

Question

Я новичок в JQuery. У меня есть повторяющийся div (.conistingBox), который имеет три внутренних div (.summary0, .summary1, .summary2), которые содержат данные. После summary0 и перед summary2 я хотел бы показать вертикальную черту. Высота этого бара должна быть установлена ​​динамически. Значение будет взято из 'externalHeight' ofosingBox'после того, как итоговые div заполнены данными.

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

Answer 1

Вы не можете присвоить значение селектору jquery, который возвращает несколько элементов. Вы должны изменить строку, которая гласит:

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

к чему-то подобному;

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

скажи мне, если это работает для тебя

Обновление: изменено $(this).siblings в $(this).children