JQuery - 컨테이너 (상위) div의 높이를 하위 요소 (세로 막대)에 할당

Question

jQuery를 처음 사용했습니다. 나는 데이터를 보유하고있는 세 개의 내부 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> 

세로선은 하드 코딩 된 경우 (How to make a vertical line in 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); 

내가 .containingBox0 및 기타 필수 요소를 포함 HTML로 귀하의 질문에 추가 된 바이올린을 업데이트하십시오 $(this).children