如何在找到div后在javascript/jquery中设置img标记的样式?

我正在一个wordpress/php网站上工作,在javascript/jquery中找到div后,我想在其中设置img标记的样式。

需要执行以下操作的HTML代码:

<div class="page-hero page-hero--reports cf">
   <figure class="page-hero__image img-fit" itemprop="image" itemscope="" itemtype="http://schema.org/ImageObject">
      <img src="">       // where opacity:0.7 needs to be apllied.  
   </figure>
   <div class="page-hero__content-contain">
      <h2 class="page-hero__title-top page-hero__title--heavy">Trans Mountain Pipeline: NEB Releases New Report, Recommends Approval </h2>
      <h2 class="page-hero__title-bottom page-hero__title--heavy"> More Coverage</h2>
   </div>
</div>

这是我试过的,但没用。

$(".page-hero--reports").each(function () {
    if ($(this).find(".page-hero__title-top").not(":empty").length > 0 && $(this).find(".page-hero__title-bottom").not(":empty").length > 0) {
        $(this).find(".img-fit img").css("opacity", "0.7");
    } 
});

问题陈述:

我想知道我需要在上面的脚本中做什么更改,以便在页面加载时在img标记上应用样式。