Lê Tùng Lê Tùng - 5 months ago 22
jQuery Question

Get image and insert into another div using Jquery?

How to grab the image of the first

swiper-slide
to insert into the div with a class of
tt1
?

Only image of first
.swiper-slide
!

Ex:

<div class="tt1"></div>
<div class="ss1">...</div>
<div class="ee1">
<div class="ee2">
<div class="swiper-slide">
<img src="/image1.jpg" style="width: 225px; height: 400px;">
</div>
<div class="swiper-slide">
<img src="/image2.jpg" style="width: 225px; height: 400px;">
</div>
<div class="swiper-slide">
<img src="/image3.jpg" style="width: 225px; height: 400px;">
</div>
</div>
</div>


Result:

<div class="tt1"><img src="/image1.jpg"></div>
<div class="ss1">...</div>
<div class="ee1">
<div class="ee2">
<div class="swiper-slide">
<img src="/image1.jpg" style="width: 225px; height: 400px;">
</div>
<div class="swiper-slide">
<img src="/image2.jpg" style="width: 225px; height: 400px;">
</div>
<div class="swiper-slide">
<img src="/image3.jpg" style="width: 225px; height: 400px;">
</div>
</div>
</div>


Or I could take the first image to form the background?

<div class="tt1" style="background: url(/image1.jpg);"></div>
<div class="ss1">...</div>
<div class="ee1">
<div class="ee2">
<div class="swiper-slide">
<img src="/image1.jpg" style="width: 225px; height: 400px;">
</div>
<div class="swiper-slide">
<img src="/image2.jpg" style="width: 225px; height: 400px;">
</div>
<div class="swiper-slide">
<img src="/image3.jpg" style="width: 225px; height: 400px;">
</div>
</div>
</div>

Answer

You can use $('.swiper-slide:eq(1) img').clone().appendTo('div.tt1')

<div class="tt1"></div>    
<div class="ss1">...</div>
<div class="ee1">
    <div class="ee2">
        <div class="swiper-slide">
            <img src="/image1.jpg" style="width: 225px; height: 400px;">
        </div>
        <div class="swiper-slide">
            <img src="/image2.jpg" style="width: 225px; height: 400px;">
        </div>
        <div class="swiper-slide">
            <img src="/image3.jpg" style="width: 225px; height: 400px;">
        </div>
    </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
   $('.swiper-slide:eq(1) img').clone().appendTo('div.tt1')
   $('.tt1 img').removeAttr('style');
</script>