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

时间:2012-08-21 11:05:30

标签: jquery slider append

我有一个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);
   });
});

提前致谢!

2 个答案:

答案 0 :(得分:1)

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

答案 1 :(得分:0)

我不太清楚你的预期结果到底是什么。但是,我理解这一点的方式是你在每个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。

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

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