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

jQuery将内容从一个div移动到同级,jquery,slider,append,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网格,我有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);
   });
});

同侧阴唇

$('.prev')。单击(函数(){ $('.box')。每个(函数(){ var$destination=$(this.prev('.box'); $(this.html().appendTo($destination); }); });
提前谢谢

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

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

我不太确定您的预期结果到底是什么。但是,我的理解是,每个div中都有内容,如果单击“上一个”,则每个div的内容都会移动到它前面的div中,如果单击“下一个”,则每个div的内容都会移动到它旁边的div中

我像这样使用HTML(为了清晰起见,我又添加了几个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('');
        }
    };
});
var$steps=$('.box');
$('.prev')。单击(函数(){
对于(i=0;i<$steps.length;i++){
如果(i>0){
var$lastStep=$($steps[i-1]);
var$currentStep=$($steps[i]);
$lastStep.html($currentStep.html());
$currentStep.html(“”);
};
};
});
$('.next')。单击(函数(){
对于(i=$steps.length-1;i>-1;i--){
如果(i+1<$steps.length){
var$currentStep=$($steps[i]);
var$nextStep=$($steps[i+1]);
$nextStep.html($currentStep.html());
$currentStep.html(“”);
}
};
});
您现在看到的是,所有内容一起移动到上一组或下一组div

如果这不是你想要的,让我知道。此外,你需要一些指标,何时停止上一步或下一步,否则你将失去所有的内容


-将所有内容移到上一个和下一个元素我不太确定您的预期结果到底是什么。但是,我的理解是,每个div中都有内容,如果单击“上一个”,则每个div的内容都会移动到它前面的div中,如果单击“下一个”,则每个div的内容都会移动到它旁边的div中

我像这样使用HTML(为了清晰起见,我又添加了几个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('');
        }
    };
});
var$steps=$('.box');
$('.prev')。单击(函数(){
对于(i=0;i<$steps.length;i++){
如果(i>0){
var$lastStep=$($steps[i-1]);
var$currentStep=$($steps[i]);
$lastStep.html($currentStep.html());
$currentStep.html(“”);
};
};
});
$('.next')。单击(函数(){
对于(i=$steps.length-1;i>-1;i--){
如果(i+1<$steps.length){
var$currentStep=$($steps[i]);
var$nextStep=$($steps[i+1]);
$nextStep.html($currentStep.html());
$currentStep.html(“”);
}
};
});
您现在看到的是,所有内容一起移动到上一组或下一组div

如果这不是你想要的,让我知道。此外,你需要一些指标,何时停止上一步或下一步,否则你将失去所有的内容


-将所有内容移动到上一个和下一个element@green_arrow:不客气。我不太确定需要什么,但我很高兴看到它有所帮助。@green_arrow:不客气。我不太确定需要什么,但我很高兴看到它有所帮助。