How to find a class element inside each li using jQuery

user_9623498 0
Viewed 16

How to find the element with class spotlight-img-blk inside each li using jQuery and add the background dynamically?

<div class="full-width">
    <div class="spotlight-blk-outer">
        <ul>
            <li>
                <div class="spotlight-inner-blk">
                    <div class="spotlight-img-blk" data-bg="home-blog1-bg.jpg"></div>
                </div>
            </li>
            <li>
                <div class="spotlight-inner-blk">
                    <div class="spotlight-img-blk" data-bg="home-blog2-bg.jpg"></div>
                </div>
            </li>
            <li>
                <div class="spotlight-inner-blk">
                    <div class="spotlight-img-blk" data-bg="home-blog2-bg.jpg"></div>
                </div>
            </li>
        </ul>
    </div>
</div>
jquery
2 Answers
$s('.spotlight-blk-outer li').each(function(){
var element = $s(this)
var imageEle = $s('.spotlight-img-blk', element)
var imgText = imageEle.data('bg')
imageEle.css('background-image', 'url(' + hostUrl + '/wp-content/themes/themeName/images/blog-images/' + imgText + ')')})
user_96234980

This seems simpler.

$(".spotlight-blk-outer .spotlight-img-blk").each(function() { 
  const img = `${hostUrl}/wp-content/themes/themeName/images/blog-images/${this.dataset.bg}`;
  $(this).closest(".spotlight-inner-blk").css({"backgroundImage": `url(${img})`});
});
<div class="full-width">
  <div class="spotlight-blk-outer">
    <ul>
      <li>
        <div class="spotlight-inner-blk">
          <div class="spotlight-img-blk" data-bg="home-blog1-bg.jpg"></div>
        </div>
      </li>
      <li>
        <div class="spotlight-inner-blk">
          <div class="spotlight-img-blk" data-bg="home-blog2-bg.jpg"></div>
        </div>
      </li>
      <li>
        <div class="spotlight-inner-blk">
          <div class="spotlight-img-blk" data-bg="home-blog2-bg.jpg"></div>
        </div>
      </li>
    </ul>
  </div>
</div>

Plain JS

document.querySelectorAll(".spotlight-blk-outer .spotlight-img-blk").forEach(function() { 
  const img = `${hostUrl}/wp-content/themes/themeName/images/blog-images/${this.dataset.bg}`;
  this.closest(".spotlight-inner-blk").style.backgroundImage = `url(${img})`;
});  
<div class="full-width">
  <div class="spotlight-blk-outer">
    <ul>
      <li>
        <div class="spotlight-inner-blk">
          <div class="spotlight-img-blk" data-bg="home-blog1-bg.jpg"></div>
        </div>
      </li>
      <li>
        <div class="spotlight-inner-blk">
          <div class="spotlight-img-blk" data-bg="home-blog2-bg.jpg"></div>
        </div>
      </li>
      <li>
        <div class="spotlight-inner-blk">
          <div class="spotlight-img-blk" data-bg="home-blog2-bg.jpg"></div>
        </div>
      </li>
    </ul>
  </div>
</div>

user_2957830
Related