jQuery在div中克隆活动的img，并将其作为div的背景图片

Question

This is the html that I have so far:

<div class="testimonials">
  <div class="item active">
    <div class="testimonial-bg"></div>
    <div class="testimonial-img">
        <img src="img/testimonial-img1.jpg" alt="" />
        <p>
            Hanna's Story
        </p>
    </div>
  </div>
  <div class="item">
    <div class="testimonial-bg"></div>
    <div class="testimonial-img">
        <img src="img/testimonial-img2.jpg" alt="" />
        <p>
            Hanna's Story
        </p>
    </div>
  </div>
</div>

I want the img tag inside the '.item' which has the class of 'active' to be the background image of .testimonials also. As each slide changes, the item image will change, and thus this background image should also change. How can I do this?

The Slider is bootstrap's default carousel. The code can be seen here:
http://codepen.io/anon/pen/aNjaEQ

Answer 1

$(".item.active").each(function() {

  var $myBg  = $(".testimonial-bg", this),
      $myImg = $(".testimonial-img img", this);

  $myBg.css({backgroundImage: "url('"+ $myImg[0].src +"')"});

});