Проблема нацеливания на определенные элементы с использованием каждого

Question

Будьте добры, я все еще учусь, но я играю с случаями, когда у меня есть несколько элементов div или списка, и я должен использовать каждый , чтобы выполнять ту же функцию в отдельных элементах, я я пытался использовать parent и prev и все виды вещей, но, как вы можете видеть в моей FIDDLE , по какой-то причине я могу получить только источник Последнее изображение, которого я хочу добиться - получить миниатюру из каждого из разделов.

HTML

$('.eaWkArticle').find('img.wp-post-image').each(function() {
     var xx = $(this).attr('src');
     $('.headerBg').css({'background' : 'url(' + xx + ') no-repeat center', '-webkit-background-size' : 'cover', '-moz-background-size' : 'cover', '-o-background-size': 'cover', 'background-size' : 'cover'}); 
});

.eaWkArticle { display:none; }
.headerBg { display:block; width:100px; height:100px; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<ul class="container">
<li class="listItem">

<span class="headerBg"></span>
<span class="headline subheader">Heading</span>
<p class="date">4/8/2020</p>
<a class="wkLink linkbuttons">Read More</a>
<div class="eaWkArticle">
<div>
<div>
<img src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png" class="wp-post-image" />
</div>
</div>
</div>

</li>
<li class="listItem">

<span class="headerBg"></span>
<span class="headline subheader">Heading</span>
<p class="date">4/9/2020</p>
<a class="wkLink linkbuttons">Read More</a>
<div class="eaWkArticle">
<div>
<div>
<img src="https://homepages.cae.wisc.edu/~ece533/images/baboon.png" class="wp-post-image" />
</div>
</div>
</div>

</li>
<li class="listItem">

<span class="headerBg"></span>
<span class="headline subheader">Heading</span>
<p class="date">4/10/2020</p>
<a class="wkLink linkbuttons">Read More</a>
<div class="eaWkArticle">
<div>
<div>
<img src="https://homepages.cae.wisc.edu/~ece533/images/boat.png" class="wp-post-image" />
</div>
</div>
</div>

</li>
</ul>

Answer 1

Вы нашли зацикленное изображение внутри .eaWkArticle, но внутри этого div есть только одно изображение. Итак, вы должны выбрать изображение и l oop пройти вокруг него и найти элемент .headerBg, ближайший к li элементу.

Рабочий код демонстрации приведен ниже -

$('img.wp-post-image').each(function(i, item) {
  var xx = $(item).attr('src');
  $(item).closest('li.listItem').find('.headerBg').css({
    'background': 'url(' + xx + ') no-repeat center',
    '-webkit-background-size': 'cover',
    '-moz-background-size': 'cover',
    '-o-background-size': 'cover',
    'background-size': 'cover'
  });
});

.eaWkArticle {
  display: none;
}

.headerBg {
  display: block;
  width: 100px;
  height: 100px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<ul class="container">
  <li class="listItem">

    <span class="headerBg"></span>
    <span class="headline subheader">Heading</span>
    <p class="date">4/8/2020</p>
    <a class="wkLink linkbuttons">Read More</a>
    <div class="eaWkArticle">
      <div>
        <div>
          <img src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png" class="wp-post-image" />
        </div>
      </div>
    </div>

  </li>
  <li class="listItem">

    <span class="headerBg"></span>
    <span class="headline subheader">Heading</span>
    <p class="date">4/9/2020</p>
    <a class="wkLink linkbuttons">Read More</a>
    <div class="eaWkArticle">
      <div>
        <div>
          <img src="https://homepages.cae.wisc.edu/~ece533/images/baboon.png" class="wp-post-image" />
        </div>
      </div>
    </div>

  </li>
  <li class="listItem">

    <span class="headerBg"></span>
    <span class="headline subheader">Heading</span>
    <p class="date">4/10/2020</p>
    <a class="wkLink linkbuttons">Read More</a>
    <div class="eaWkArticle">
      <div>
        <div>
          <img src="https://homepages.cae.wisc.edu/~ece533/images/boat.png" class="wp-post-image" />
        </div>
      </div>
    </div>

  </li>
</ul>