Get image and insert into another div using Jquery?

Question

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>

api.jquery.com/first-child-selector

Seano666
– Seano666

2016-07-01 17:30:11 +00:00
Commented Jul 1, 2016 at 17:30 — Seano666
– Seano666, Commented Jul 1, 2016 at 17:30

j08691 · Accepted Answer · 2016-07-01 17:30:20Z

3

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>

answered Jul 1, 2016 at 17:30

j08691

209k33 gold badges269 silver badges281 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Piyush.kapoor · Accepted Answer · 2016-07-01 17:35:01Z

2

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

edited Jul 1, 2016 at 17:35

answered Jul 1, 2016 at 17:29

Piyush.kapoor

6,8311 gold badge25 silver badges21 bronze badges

Comments

Ricky Ruiz · Accepted Answer · 2016-07-01 17:58:40Z

1

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)

edited Jul 1, 2016 at 17:58

answered Jul 1, 2016 at 17:43

Ricky Ruiz

27k7 gold badges49 silver badges61 bronze badges

2 Comments

LeTung Over a year ago

You can remove style of image ?

Ricky Ruiz Over a year ago

Yes, I will suggest setting width and height in an external css file rather than using inline-style. Will edit.

Mani · Accepted Answer · 2016-07-01 17:47:06Z

0

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>

edited Jul 1, 2016 at 17:47

answered Jul 1, 2016 at 17:34

Mani

2,6552 gold badges23 silver badges44 bronze badges

6 Comments

j08691 Over a year ago

How's this any different from the answer I posted?

Mani Over a year ago

You are using .swiper-slide:first and i am using .swiper-slide:eq(1). Different ways of selectors is there may be these simple differece will help you to some one. eq(2),eq(3) also we can use for next elements.

LeTung Over a year ago

You can remove style of image ?

Mani Over a year ago

Let us continue this discussion in chat.

j08691 Over a year ago

:eq(1) is the same as :first so your answer is the same

|

Collectives™ on Stack Overflow

Get image and insert into another div using Jquery?

4 Answers 4

Comments

Comments

2 Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

2 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related