Question

在Blogger模板中，我将采用精选图片的img src并将其作为内联样式背景图片应用于div。那部分起作用。问题是我似乎无法弄清楚如何为每个实例做到这一点。

这是到目前为止我想到的其他示例：

// Let's make the featured image a background image
$('.post.hentry').each(function() {
  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-element）用作每个实例的前一个元素（.custom-post-image）的背景图像。

Answer 1

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

// Let's make the featured image a background image
$('.post.hentry').each(function() {
  //Get the first element of the image elements inside get post hentry
  let getImageSrc = $(this).find('.image-element').first().attr('src');
  console.log(getImageSrc);
  //THe rest of your code here
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="blog-posts">
  <article>
    <div class="post-outer">
      <div class="post hentry">
        <div class="post-featured-image custom-post-image">
          <img class="post-featured-image image-element" src="i_am_1" /> body text
        </div>
      </div>
    </div>
  </article>
  <article>
    <div class="post-outer">
      <div class="post hentry">
        <div class="post-featured-image custom-post-image">
          <img class="post-featured-image image-element" src="i_am_2" /> body text
        </div>
      </div>
    </div>
  </article>
  <article>
    <div class="post-outer">
      <div class="post hentry">
        <div class="post-featured-image custom-post-image">
          <img class="post-featured-image image-element" src="i_am_3" /> body text
        </div>
      </div>
    </div>
  </article>
</div>

编辑

进一步澄清

执行$('.of-a-class')将返回一个0〜n个元素的数组，因此需要使用.first()函数。正如我之前评论的那样，当您使用$('.image-element')时，您带来了该类中所有属于DOM的元素，而不是所有属于.post.hentry的元素。因此，您需要使用.find()来获取属于.image-element的{{1}}元素

Answer 2

问题是您没有传递相应的索引。如果显示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 + ')');
});

对每个实例执行Jquery

2 个答案: