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中，如果你单击next，每个div的内容将被移动到它旁边的内容。 / p>

我使用了这样的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。

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

jQuery将内容从一个div移动到兄弟

2 个答案:

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