2017-05-21 65 views
0

我是新手到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--> 

的Javascript

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

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

resizeDiv(); 

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

謝謝!

回答

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); 
    }); 

} 

你是幾乎沒有,你失蹤是。每個循環

+0

謝謝!非常感激。 – EdK