動態元素高度不會影響所有個體

Question

我已經寫了一些jQuery，它可以動態地設置父母有.four-three-img類的img元素上的4：3縱橫比高度。它的工作方式與預期一致，除非單個頁面包含寬度不同的.four-three-img元素。

例如，如果存在包含.four-three-img img元件中的兩個section S，它將確定所述第一section內的第一img的高度和它在第一和第二section元件適用於其餘img s，這可能是更小的或更大。我已經嘗試將腳本放在for循環中，但它沒有區別。

這裏的腳本：

$(window).on('load resize', function() { 
    var fourThreeHeight = $('.four-three-img').width() * 0.75; 

    $('.four-three-img img').each(function() { 
    $(this).height(fourThreeHeight); 
    }); 
}); 

演示：http://codepen.io/ourcore/pen/apWjmg

Answer 1

儘量把fourThreeHeight -variable的each -function內，並改變$('.four-three-img')到$(this)：

$(window).on('load resize', function() { 
    $('.four-three-img img').each(function() { 
    var fourThreeHeight = $(this).width() * 0.75; 
    $(this).height(fourThreeHeight); 
    }); 
}); 

有它外部的each功能將會導致，只有f的寬度第一個要存儲的元素，而不是每個元素。

Live Codepen