은 행의 열 폭을 얻기

Question

나는 내 웹 사이트에 대한 열 시스템을 만들려고하고이 같이 보일 것이다 :

.container { 
    width: 75%; 
    clear: both; 
    margin: 0 auto; 
} 
.row { 
    margin-bottom: 40px; 
    overflow: hidden; 
} 
div[class*="col-"] { 
    float: left; 
    min-height: 1px; 
} 
.col-13 { 
    width: 33.333333%; 
    background-color: blue; 
} 

: 그것은 CSS의 모습

<div class="container"> 
    <div class="row"> 
     <div class="col-13">a</div> 
     <div class="col-13" style="background-color: yellow;">a</div> 
     <div class="col-13">a</div> 
    </div> 
</div> 

이제 jQuery에서 <div class="row">의 열 (<div class="col-13"> etc etc etc)에 width이 100 % 이상인 간단한 시스템을 만들려고합니다. 행이 표시되지 않습니다.

먼저 행 안의 모든 너비의 열을 찾아야했습니다. 느릅 나무는 난이 코드 조각에 의해 시도 :

$('.row div[class*="col-"]').each(function(index) { 
    var _this = $(this); 
    var width = _this.width(); 
    var parentWidth = _this.offsetParent().width(); 
    var percent = Math.round(100*width/parentWidth); 
    console.log('The elements width is '+percent+'%'); 
}); 

을하지만이 html 코드를 시도 할 때 :

<div class="row"> 
    <div class="col-13">a</div> 
    <div class="col-13" style="background-color: yellow;">a</div> 
    <div class="col-13">a</div> 
</div> 

예상 출력
배 33.333333%,을 나는 배 <div class="col-13">의 요소를 가지고 있기 때문에 width이 33.333333%입니다. .container이 75%의 폭과 자사의 계산까지이 있기 때문에

실제 출력
배 25%

는 것 같아요,하지만 난 이유를 잘 모릅니다.

그 후 계산하고 싶지만 그 방법을 모릅니다.

var parentWidth = _this.offsetParent().width(); 

var parentWidth = _this.parent().width(); 

에 offsetParent()이 첫 번째 위치 조상의 조상을 검색하기 때문에

Demo

Answer 1

변경입니다. 귀하의 예에서 이것은 내가 볼 수있는 한 html 요소를 반환합니다.

parent()은 지정된 선택자없이 가장 가까운 부모 요소를 반환합니다. 귀하의 예에서는 .row을 반환합니다.