Javascript 当使用js和jquery按下向上和向下按钮时，如何交换内部DIV数据？

我有工作代码，其中我有一个时间线。时间线内的每个事件都是相互关联的

这里有一个删除按钮，用于删除特定数据。还有一个复制数据的。 但我想当我点击向上和向下按钮

就像我点击“向上”按钮一样。它应该将第三个元素数据交换为第二个数据，将第二个数据交换为第三个数据。 在“向下”按钮上进行相同的操作。 下面是工作示例代码，请查看。 我们将感谢您的帮助

$（文档）.ready（函数（）{
$（“#编辑按钮”）。单击（函数（）{
$（“幻灯片”）.css（“显示”、“无”）；
})
$（“#幻灯片部分”）.attr（“内容可编辑”、“真实”）；
var i=1；
$（“节”）。每个（函数（）{
$（this.attr（“id”，i）；
$（this.append（“+”和#10006“+”）；
$（this.append（“+”和#10010“+”）；
$（this.append（“+”↑“+”）；
$（this.append（“+”h“+”）；
i++；
});
$（“#幻灯片”）。在（'click'，'.deleteStyle'，function（）上{
$（this.parent（“section”）.remove（）
});
$（“#幻灯片”）。在（'click'，'.deleteStyle2'，function（）上{
var ele=$（this）.clone（true）；
$（本）。最近的（“节”）。在（ele）之后；
});
$（“#幻灯片”）。在（'click'，'.deleteStyle4'，function（）上{
var currentData=$（this.parent（）.next（）.html（）；
var currentString=“”+currentData+”；
console.log（currentString）
var abc1=$（this）.next（）.replaceWith（currentString）；
控制台日志（abc1）
});
$（“#幻灯片”）。在（'click'，'.deleteStyle3'，function（）上{
var previousData=$（this.parent（）.prev（）.html（）；
var previousString=“”+previousData+”；
console.log（上一个字符串）
var abc=$（this.prev（）.replaceWith（previousString）；
控制台日志（abc）
//$（this.parent（）.remove（）.html（）；
//$（this）.closest（“section”）.after（previousString）；
//$（此）.currentString之前最近的（“节”）；
//console.log（currentData）；
//console.log（以前的数据）；
});
});
div[type=“timeline/slideshow”]>部分，
div[type=“timeline”]>节{
保证金：自动；
宽度：500px；
z指数：100；
不透明度：1；
左边框：4px实心#00BCD4；
边框顶部：1px纯色灰色；
最小高度：130px；
背景色：#b3e5fc2b；
边界半径：4px；
边缘底部：55px；
位置：相对位置；
顶部：50px；
盒影：rgb（136、136、136）3px 3px 1px；
-webkit动画：fadein2s；
-moz动画：fadein2s；
-ms动画：fadein2s；
-o-动画：fadein2s；
动画：Fadein2S；
}
/*div[type=“timeline/slideshow”]>section:hover，div[type=“timeline”]>section:hover{
不透明度：1；
} 
*/
div[type=“timeline/slideshow”]：：之前，
div[type=“timeline”]：：之前{
内容：“；
位置：绝对位置；
左：50%；
底部：0；
宽度：.2em；
背景：白色；
高度：55px；
}
div[type=“timeline/slideshow”]>section:：after，
div[type=“timeline”]>section:：after{
内容：“；
位置：绝对位置；
左：50%；
底部：-56px；
宽度：.2em；
背景：灰色；
高度：54px；
}
div[type=“timeline/slideshow”]>section>header，
div[type=“timeline”]>section>header{
字号：600；
颜色：卡德蓝；
转换：转换（16px，23px）；
字体大小：30px；
字体系列：arial；
填充：3倍；
位置：相对位置；
单词包装：打断单词；
线高：31px；
}
div[type=“timeline/slideshow”]>section>article，
div[type=“timeline”]>section>article{
转换：转换（12px，14px）；
颜色：黑色；
字体大小：20px；
字体系列：arial；
位置：相对位置；
填充：9px；
单词包装：打断单词；
线高：31px；
}
div[type=“timeline”]>section:type:：after的最后一个{
显示：无；
}
div[type=“slideshow”]{
身高：471px；
位置：相对位置；
顶部：100px；
}
div[type=“slideshow”]>节：非（.hideClass）{
保证金：自动；
宽度：900px；
最大高度：265像素；
z指数：100；
边框顶部：1px纯色灰色；
左边框：4px实心#00BCD4；
最小高度：250px；
背景色：#b3e5fc2b；
边界半径：4px；
边缘底部：55px；
位置：绝对位置；
溢出x：隐藏；
最高：21.4%；
左：168px；
盒影：rgb（136、136、136）3px 3px 1px；
}
div[type=“slideshow”]>section:not（.hideClass）>header{
字号：600；
颜色：卡德蓝；
转换：转换（93px，32px）；
字体大小：34px；
字体系列：arial；
位置：相对位置；
单词包装：打断单词；
}
div[type=“slideshow”]>section:not（.hideClass）>article{
转换：转换（87px，39px）；
最大宽度：800px；
颜色：黑色；
字体大小：22px；
字体系列：arial；
位置：相对位置；
填充：10px；
单词包装：打断单词；
}
/*.activeClass{
不透明度：1！重要；
}
*/
.隐藏类{
不透明度：0；
最小高度：0！重要；
边距：0！重要；
}
.hideClass头文件，
.隐藏类文章{
显示：无；
}
@关键帧淡入淡出{
0% {
不透明度：0
}
50% {
不透明度：0.5
}
100% {
不透明度：1
}
}
div[type=“timeline”]br{
显示：无；
}
.进步班{
高度：4px；
显示：无；
顶部：46px；
左：0px；
宽度：100%；
位置：固定；
左边距：-1px；
页边顶部：-1px；
}
.彩色箭头{
位置：相对位置；
顶部：228px；
颜色：#085153；
左：93px；
}
.彩色箭头{
位置：相对位置；
顶部：228px；
颜色：#085153；
左：94%！重要；
}
@仅介质屏幕和（最大宽度：992px）{
div[type=“timeline/slideshow”]>部分，
div[type=“timeline”]>节{
宽度：650px；
}
.彩色箭头{
左-18px；
}
div[type=“slideshow”]>节：非（.hideClass）{
宽度：640px；
左：14px；
}
.彩色箭头{
左：99%！重要；
}
}
@仅介质屏幕和（最大宽度：992px）{
div[type=“slideshow”]>节{
宽度：650px；
}
div[type=“slideshow”]>节：非（.hideClass）{
宽度：640px；
左：18px；
}
}
@仅介质屏幕和（最小宽度：1201px）和（最大宽度：1299px）{
div[type=“slideshow”]>节：非（.hideClass）{
宽度：845px；
左：154px；
}
}
@媒体o