jQuery 将内容从一个 div 移动到同级

Question

我有一个从屏幕流出的 div 网格，我有 prev 和 next 按钮来控制这些内容。

基本上，在每个 div 内部我都有一些内容，当用户单击 prev 时，我希望所有内容从它所在的 div 移动到下一个 div，我尝试了一些代码，但我不确定我是否走在正确的轨道上......

<div class="box"><img src="../images/two.jpg" alt="" /></div>
<div class="box"><p>Lorum ipsum</p></div>
<div class="box"><img src="../images/three.jpg" alt="" /></div>

$('.prev').click(function(){                
   $('.box').each(function(){
      var $destination = $(this).prev('.box');
      $(this).html().appendTo($destination);
   });
});

提前致谢！

Answer 1

使用 appendTo() 时，您将 div 的内容添加到目标 div。 如果您希望将目标 div 中的数据替换为当前 div 中的数据，则 apppendTo() 不是您需要的 - 但$(destination).text($(this).html())

Answer 2

我不太确定您的预期结果究竟是什么。但是，我理解这一点的方式是，您在每个 div 中都有内容，并且如果您单击上一个，每个 div 的内容将移动到它之前的 div 中，如果您单击下一个，每个 div 的内容将移动到它旁边的一个。

我使用了这样的 HTML（为了清晰起见，我添加了几个 div）：

<div class="box"></div>
<div class="box"></div>
<div class="box"><img src="http://www.fileden.com/files/2012/6/19/3318010/Eraser.png" alt="" /></div>
<div class="box"><p>Lorum ipsum</p></div>
<div class="box"><img src="http://www.fileden.com/files/2012/6/19/3318010/Script.png" alt="" /></div>
<div class="box"></div>
<div class="box"></div>

然后像这样的下一个/上一个动作：

var $steps = $('.box');

$('.prev').click(function() {
    for (i = 0; i < $steps.length; i++) {
        if (i > 0) {
            var $lastStep = $($steps[i - 1]);
            var $currentStep = $($steps[i]);

            $lastStep.html($currentStep.html());
            $currentStep.html('');
        };
    };
});

$('.next').click(function() {
    for (i = $steps.length-1; i > -1; i--) {
        if (i + 1 < $steps.length) {
            var $currentStep = $($steps[i]);
            var $nextStep = $($steps[i + 1]);

            $nextStep.html($currentStep.html());
            $currentStep.html('');
        }
    };
});

您所看到的现在所有内容都一起移动到上一组或下一组 div。

如果这不是您想要的，请告诉我。此外，您将需要一些指示何时停止上一个或下一个，否则您将丢失所有内容。

DEMO - 将所有内容移动到上一个和下一个元素