Javascript 对每个实例执行Jquery

在Blogger模板中，我将特征图像的img src作为内联样式的背景图像应用到div中。这部分工作正常。问题是我似乎不知道如何为每一个实例做这件事

这就是我在其他例子中得出的结论：

//让我们将特色图像设为背景图像
$（'.post.hentry'）。每个（函数（）{
var getImageSrc=$（'.post-featured-image.image-element'）.attr（'src'）；
$（'.post-featured image.custom-post-image'）.css（'background-image'，'url（'+getImageSrc+'））；
});

这不起作用，因为它获取第一个实例的特征图像，并将其应用于所有其他实例。如何使它在每个实例中正常工作

HTML结构的简单标记如下所示：

<div class="blog-posts">
 <article>
  <div class="post-outer">
   <div class="post hentry">
    <div class="post-featured-image custom-post-image"></div>
    <img class="post-featured-image image-element" src="image-1.jpg" />
     body text
   </div>
  </div>
 </article>
 <article>
  <div class="post-outer">
   <div class="post hentry">
    <div class="post-featured-image custom-post-image"></div>
    <img class="post-featured-image image-element" src="image-2.jpg" />
     body text
   </div>
  </div>
 </article>
 <article>
  <div class="post-outer">
   <div class="post hentry">
    <div class="post-featured-image custom-post-image"></div>
    <img class="post-featured-image image-element" src="image-3.jpg" />
     body text
   </div>
  </div>
 </article>
</div>

正文
正文
正文

---

换句话说，查看标记，我需要将每个img src（.image元素）应用为每个实例的前一个元素（.custom post image）的背景图像。

问题是您没有传递相应的索引。 如果您显示html结构，可能有更好的方法来实现这一点。但是下面的代码应该可以工作，假设两个类的数量相等并且在一起

// Let's make the featured image a background image
$('.post.hentry').each(function(index) { //get the corresponding index
  var getImageSrc = $('.post-featured-image.image-element').get(index).getAttribute('src'); //retrieve src of the image at corresponding index
  $('.post-featured-image.custom-post-image').get(index).style.backgroundImage = 'url(' + getImageSrc + ')');
});

或者只使用Jquery

$('.post.hentry').each(function(idx) {
  var getImageSrc = $('.post-featured-image.image-element').index(idx).attr('src');
  $('.post-featured-image.custom-post-image').index(idx).css('background-image', 'url(' + getImageSrc + ')');
});

您应该使用获取内部img，然后仅选择第一个元素

//让我们将特色图像设为背景图像
$（'.post.hentry'）。每个（函数（）{
//获取Get post hentry中图像元素的第一个元素
让getImageSrc=$（this.find（'.image元素'）.first（）.attr（'src'）；
console.log（getImageSrc）；
//这里是您的其余代码
});

正文
正文
正文
您可以发布HTML吗？如果看不到您在DOMI中要选择的具体内容，很难说您是在尝试获取“.post.hentry”中的“.post-featured image.image”元素，但是当您调用$（“.post-featured image.image元素”）时，实际上您获取的是DOM中具有该类的所有元素。也许可以检查.children（）函数发布的简化HTML标记。您现在缺少一堆
结束标记，这真的是您的HTML吗？如果它真的有效，我会很惊讶is@CertainPerformance忘记自动关闭自定义功能图像分区。现在有意义吗？这不起作用。如果有帮助的话，我在原始文章中添加了简化的HTML标记。这与问题相反。它没有将第一个特征图像应用于所有实例，而是将最后一个特征图像应用于所有实例。我需要它在每个实例中应用每个特征图像。相同的逻辑适用于$（'.post-featured-image.custom-post-image'）。您必须获取属于的元素。post.hentry。您可能得到的是最后一个特色实例，因为它是循环方法中的最后一个实例，行为$（this）.find（'.post-featured-image.custom-post-image'）.first（）.css（…）；每个实例中只有一个元素具有class.image元素。所以我不理解first（）的必要性。@Xarcell您在逻辑上知道这一点，但解释器可能不知道。第一个（）是确保使用单个元素。如果您可以始终确保该类中只有一个元素，则可能没有必要这样做。