Question

我对jQuery不太满意，提出解决方案时遇到问题。我所拥有的是一个带有缩略图的博客，我想获取缩略图的img src，并将其作为每个实例的父元素的背景。

总而言之，我的HTML如下所示：

<div id="main" class="site-content homepage">
    <article id="xxx">
        <div class="post-thumbnail">
            <img class="post-img-thumbnail" src="xxx" />
        </div>
    </article>
   <article id="xxx">
        <div class="post-thumbnail">
            <img class="post-img-thumbnail" src="xxxx" />
        </div>
    </article>
    <article id="xxx">
        <div class="post-thumbnail">
            <img class="post-img-thumbnail" src="xxxxx" />
        </div>
    </article>
</div>

对于Blogroll上的每个这样的代码块，我希望它看起来像：

<div id="main" class="site-content homepage">
    <article id="xxx">
        <div class="post-thumbnail" style="background: url(xxx)'">

        </div>
    </article>
    <article id="xxx">
        <div class="post-thumbnail" style="background: url(xxxx)'">

        </div>
    </article>
    <article id="xxx">
        <div class="post-thumbnail" style="background: url(xxxxx)'">

        </div>
    </article>
</div>

我的jquery看起来像这样，但是我知道这是不对的。不仅因为它不起作用，还因为它实际上没有任何意义。我不知道ID是什么，所以我不知道如何制作它，这样就不会在第一篇文章中出现。无论如何：

var getImageSrc = $('#main.site-content.homepage .post-thumbnail > img').attr('src');
  $('#main.site-content.homepage .post-thumbnail > img').each(function() {
      $(this).parent().css('background-image', 'url(' + getImageSrc + ')');
  }
  $('.post-img-thumbnail').remove();

编辑：HTML上面是一个摘要，确切的部分HTML是：

<article id="post-547" class="post-547 post type-post status-publish format-standard has-post-thumbnail hentry category-motivation">
    <figure class="post-thumbnail">
        <img width="1920" height="1080" src="http://wordpress.xxxxxx.com/wp-content/uploads/2019/01/oscar.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" srcset="http://wordpress.xxxxxx.com/wp-content/uploads/2019/01/oscar.jpg 1920w, http://wordpress.xxxxxx.com/wp-content/uploads/2019/01/oscar-300x169.jpg 300w, http://wordpress.xxxxxx.com/wp-content/uploads/2019/01/oscar-768x432.jpg 768w, http://wordpress.xxxxxx.com/wp-content/uploads/2019/01/oscar-1024x576.jpg 1024w" sizes="(max-width: 1920px) 100vw, 1920px">
        <div class="post-date-thumbnail">
             <div class="post-date-day">25</div>
             <div class="post-date-month">Jan</div>
             <div class="post-date-year">2019</div>
        </div>
        <h2 class="entry-title-thumbnail"><a href="http://wordpress.xxxxxx.com/index.php/2019/01/25/wake-up-world/" rel="bookmark">Wake Up World!</a></h2>  
    </figure>
</article>

Answer 1

这将是jQuery .each()的一个好用例。

您可以使用它遍历所有class="post-thumbnail"元素，获取第一个<img>，获取它的src属性，将其应用于post-thumbnail元素的CSS，最后删除<img>。

$(".post-thumbnail").each(function() {
  let $img = $(this).children("img").first();
  let src = $img.attr("src");
  $(this).css("background",`url(${src})`);
  $img.remove();
});

console.log( $("article").html() );

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<article id="post-547" class="post-547 post type-post status-publish format-standard has-post-thumbnail hentry category-motivation">
  <figure class="post-thumbnail">
    <img width="1920" height="1080" src="http://wordpress.xxxxxx.com/wp-content/uploads/2019/01/oscar.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" srcset="http://wordpress.xxxxxx.com/wp-content/uploads/2019/01/oscar.jpg 1920w, http://wordpress.xxxxxx.com/wp-content/uploads/2019/01/oscar-300x169.jpg 300w, http://wordpress.xxxxxx.com/wp-content/uploads/2019/01/oscar-768x432.jpg 768w, http://wordpress.xxxxxx.com/wp-content/uploads/2019/01/oscar-1024x576.jpg 1024w"
      sizes="(max-width: 1920px) 100vw, 1920px">
    <div class="post-date-thumbnail">
      <div class="post-date-day">25</div>
      <div class="post-date-month">Jan</div>
      <div class="post-date-year">2019</div>
    </div>
    <h2 class="entry-title-thumbnail"><a href="http://wordpress.xxxxxx.com/index.php/2019/01/25/wake-up-world/" rel="bookmark">Wake Up World!</a></h2>
  </figure>
</article>

Answer 2

$(".post-thumbnail").each(function(){
  var img = $(this).find("img")
  var pic = img.prop("src");
  $(this).attr("style","background: url(" + pic + ")");
  img.remove();
});

对于每个实例，将子级img src用作背景，并将其应用于父级

2 个答案: