Question

如何抓取第一个swiper-slide的图片，插入到tt1类的div中？

仅限第一个.swiper-slide的图像！

例如：

<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>

结果：

<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>

或者我可以拍摄第一张图片来形成背景？

<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 1

您可以使用：

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

<强> jsFiddle example

这将选择类swiper-slide的第一个元素，然后是图像，复制它并将其附加到类tt1的div。生成的HTML是：

<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>

Answer 2

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

Answer 3

<强> SOLUTION：

要实现此目的，您将使用CSS选择器来定位您的第一个图像，该图像稍后将用作您的jQuery选择器。

您需要使用伪类:first-child，稍后使用clone() jQuery方法创建克隆，最后使用该元素将该克隆附加到所需的div元素appendTo()方法。

JSFiddle

克隆的图像用红色包围。图像克隆并附加为蓝色。

CODE SNIPPET

＆＃13;

$(".swiper-slide:first-child img").clone().appendTo($(".tt1"));

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

作为附注 ：我建议删除这些内联样式的css属性并在外部css文件中使用它们。

替换样式属性：

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

使用：

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

（在外部CSS文件中）

Answer 4

您可以使用$('.swiper-slide:eq(1) img').clone().appendTo('div.tt1')

＆＃13;

<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>

＆＃13;

使用Jquery获取图像并插入另一个div？

4 个答案: