javascript - 找到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标签上。

最佳答案

您使用.each是否有原因？

怎么样：

// find elements
$(".page-hero--reports img").css("opacity", "0.2");

像这样：

// find elements
$(".page-hero--reports img").css("opacity", "0.2");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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="https://cdn.cnn.com/cnnnext/dam/assets/190311171619-sarah-sanders-0311-medium-tease.jpg">
   </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>