CODEWITHSUNDEEP
javascriptjqueryhtmlcss
LeTung
LeTung

Reputation: 123

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>

Upvotes: 0

Views: 68

Answers (4)

Ricky Ruiz
Ricky Ruiz

Reputation: 26771

SOLUTION:

To achieve this you will use a CSS selector to target your first image, which will later be used as your jQuery selector.

You'll need to use the pseudo-class :first-child, later on create a clone using clone() jQuery method and finally appending that clone to the desired div element using the appendTo() method.

JSFiddle

Image being cloned surrounded in red. Image cloned and appended surrounded in blue.

CODE SNIPPET:

$(".swiper-slide:first-child img").clone().appendTo($(".tt1"));
.tt1 img {
  border: 3px solid blue;
  display: inline-block;
}
.swiper-slide img {
  width: 225px;
  height: 400px;
}
.ee2 .swiper-slide:first-child img {
  border: 3px solid tomato;
  display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tt1"></div>
<div class="ss1">...</div>
<div class="ee1">
  <div class="ee2">
    <div class="swiper-slide">
      <img src="http://placehold.it/225x400">
    </div>
    <div class="swiper-slide">
      <img src="http://placehold.it/225x400">
    </div>
    <div class="swiper-slide">
      <img src="http://placehold.it/225x400">
    </div>
  </div>
</div>

As a side note: I recommend removing these inline-style css properties and using them in an external css file.

Replace style attribute:

style="width: 225px; height: 400px;"

With:

.ee2 .swiper-slide img {
  width: 225px;
  height: 400px;
}

(In an External CSS file)

Upvotes: 1

Mani
Mani

Reputation: 2655

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>

Upvotes: 0

Piyush.kapoor
Piyush.kapoor

Reputation: 6803

$('.tt1').append($('.swiper-slide:first-child img').clone())

Upvotes: 2

j08691
j08691

Reputation: 207900

You could use:

$('.swiper-slide:first img').clone().appendTo('div.tt1')

jsFiddle example

This selects the first element of the class swiper-slide, then the image, copies it and appends it to the div with class tt1. The resulting HTML is:

<div class="tt1"><img src="/image1.jpg" style="width: 225px; height: 400px;"></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>

Upvotes: 3

Related Questions