Question

我有以下HTML代码：

<div class="block">
    <div class="destination"></div>
    <div class="source"><img src="/img-1.png" alt="test"></div>
</div>
<div class="block">
    <div class="destination"></div>
    <div class="source"><img src="/img-2.png" alt="test"></div>
</div>
<div class="block">
    <div class="destination"></div>
    <div class="source"><img src="/img-3.png" alt="test"></div>
</div>

我需要移动来自＆＃34;来源＆＃34;到＆＃34;目的地＆＃34;在每个div - ＆＃34;块＆＃34;。

当我尝试代码时：

$j('.block .source img').each(function () {
        $j(this).detach().appendTo('.block > .destination');
    });

我在每个div中获得所有三张图片。

Answer 1

检查HTML，您会看到图像现在位于.destination div内：

$('.block').find('.source').each(function() {
  var that = $(this);
  var img = that.children().clone();
  that.empty();
  that.closest('.block').find('.destination').append(img);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="block">
    <div class="destination"></div>
    <div class="source"><img src="/img-1.png" alt="test"></div>
</div>
<div class="block">
    <div class="destination"></div>
    <div class="source"><img src="/img-2.png" alt="test"></div>
</div>
<div class="block">
    <div class="destination"></div>
    <div class="source"><img src="/img-3.png" alt="test"></div>
</div>

Answer 2

使用.closest(SELECTOR)查找closest
的ELEMENT个父元素

＆＃13;

var $j = $;
$j('.block .source img').each(function() {
  $j(this).appendTo($(this).closest('.block').find('.destination'));
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="block">
  <div class="destination"></div>
  <div class="source">
    <img src="/img-1.png" alt="test">
  </div>
</div>
<div class="block">
  <div class="destination"></div>
  <div class="source">
    <img src="/img-2.png" alt="test">
  </div>
</div>
<div class="block">
  <div class="destination"></div>
  <div class="source">
    <img src="/img-3.png" alt="test">
  </div>
</div>

＆＃13;

Answer 3

请改用：

$j('.block .source img').each(function() {
  $j(this).appendTo( $(this).parent().prev() );
});

你需要使用this来引用循环的图像，并且不需要使用appendTo（）的detach（），因为appendTo（）将处理移动。

<强> jsFiddle example

Answer 4

$(".block").each(function(){
    var html = $(this).find(".source").html();
  $(this).find(".source").empty();
  $(this).find(".destination").html(html);
});

https://fiddle.jshell.net/40x85u7b/

Answer 5

$('.block').each(function(){
  var $this = $(this);
  //find the image is source and append it to the destination.  append will do the detach for you
  $this.find('.source img').appendTo($this.find('.destination'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="block">
    <div class="destination"></div>
    <div class="source"><img src="/img-1.png" alt="test"></div>
</div>
<div class="block">
    <div class="destination"></div>
    <div class="source"><img src="/img-2.png" alt="test"></div>
</div>
<div class="block">
    <div class="destination"></div>
    <div class="source"><img src="/img-3.png" alt="test"></div>
</div>

在每个div JQuery中移动图像

5 个答案: