jqueryのこのオブジェクトだけにCSSの変更を適用する方法

Question

このコードは、カスタムシャドウのサイズをイメージの高さに合わせて大きくするという点で優れています。しかし、ページ上の異なるサイズの画像に適用すると、すべての画像を最初の画像サイズにリサイズします。もっと具体的にするにはどうすればいいですか？構文のブランキング。

<li class="col third impact-home">   
     <div class="image-with-overlay"> 
     <%= image_tag 'impact.jpg', :class => "image-with-shadow" %> 
     <div class="image-shadow"></div> 
     </div> 
    </li> 

$(document).ready(function() { //Fires when DOM is loaded 
    getImageSizes(); 
    $(window).resize(function() { //Fires when window is resized 
     getImageSizes(); 
    }); 
}); 

function getImageSizes() { 
    var imgHeight = $(".image-with-shadow").height(); 
    var imgMargin = (- imgHeight) * .995; 
    console.log(imgMargin); 
    $(".image-shadow").css({"height": imgHeight}); 
    $(".image-shadow").css({"margin-top": imgMargin}); 
} 

Answer 1

各画像をループして個別に処理する必要があります。 HTMLせずに私は.image-shadowが画像にどのように関連するか、それ自体を知らないが、それはこの

function getImageSizes() { 
     $(".image-with-shadow").each(function() { 
      var imgHeight = $(this).height(); 
      var imgMargin = (- imgHeight) * .995; 
      console.log(imgMargin); 
      //need to select the image shadow in relation to each image 
      //with no HTML reference i'm not sure how it's laid out 
      $(this).closest(".image-shadow").css({"height": imgHeight}); 
      $(this).closest(".image-shadow").css({"margin-top": imgMargin}); 
    }) 

}