如何在jquery中将css更改仅应用于此对象

这段代码在将自定义阴影调整为图像高度方面非常有效。但如果我将其应用于页面上不同大小的图像，则会将所有图像的大小调整为第一个图像大小。我如何使它更具体？语法上的空白

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

---

您需要遍历每个图像并分别处理它们。没有html我不知道如何。图像阴影与图像本身有关，但它可能看起来像这样

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

}

---

希望您知道您正在从带阴影的$.image中的对象数组中获取第一个对象参数的大小。为了简单起见，将其添加到一个循环中，这将按要求工作。您还可以制作一个jquery插件，然后将其用于任何特定的图像。对于插件文档，请检查这一点，如果没有HTMLi，这是毫无意义的。next.css{height:imgHeight}；