동일한 클래스 요소를 반복하고 너비와 높이를 지정하십시오.

Question

저는 js & jQuery의 초보자입니다.로드 된 img의 너비와 높이를 동적으로 가져와 절대 위치 요소 (.imgCover)에 할당하는 데 도움이 필요합니다. 모든 이미지의 크기가 다릅니다.

아래 js 코드는 첫 번째 이미지의 크기 만 반환하고 마지막 이미지까지 계산하지 않습니다. 모든 요소를 ​​반복하고, 각 치수 (.imageHolder) 블록의 너비와 높이를 가져 와서 각각의 (.imgCover) div에 할당하는 방법을 찾고 있습니다.

다음은 현재 코드입니다.

HTML을

<div class="imageBlock"> 

<div class="imageHolder"> 
    <div class="imgCover"> </div> 
    <img class="photo" src="images/img1.jpg"/> 
</div> 

<div class="imageHolder"> 
    <div class="imgCover"> </div> 
    <img class="photo" src="images/img2.jpg"/> 
</div> 

<div class="imageHolder"> 
    <div class="imgCover"> </div> 
    <img class="photo" src="images/img3.jpg"/> 
</div> 

</div><!-- imageBlock--> 

자바 스크립트

var imageCover = $('.imgCover'), 
    finalImage = $('.photo'); 

function resizeDiv() { 
    imageCover.heightfinalImage.height()); 
imageCover.width(finalImage.width()); 
} 

resizeDiv(); 

$(window).resize(function() { 
    resizeDiv(); 
});   

감사합니다!

Answer 1

이 함께 resizeDiv()를 교체 : 당신은 거의 있었다

function resizeDiv() { 

    $('.photo').each(function() { 

     var height = $(this).height(); 
     var width = $(this).width(); 

     var $imgCover = $(this).prev(); // get the previous element to the photo (the image cover) 

     $imgCover.height(height); 
     $imgCover.width(width); 
    }); 

} 

은 당신이 실종 된 것은