jquery实现节点上移、下移
程序员文章站
2023-12-26 15:13:57
...
$().prop('outerHTML')js dom里有一个属性outerHTML用来获取当前节点的html代码（包括当前节点），通过jquery的prop()方法可以拿到，
具体实现代码如下
<DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jquery实现节点上移、下移</title>
</head>
<body>
<div>
<div class="item" style="border: 1px solid red;">
<div style="display: flex;">
<div class="sort-down">下移</div>
<div class="sort-asc">上移</div>
</div>
<div>
内容11111
</div>
</div>
<div class="item" style="border: 1px solid blue; text-align: center">
<div style="display: flex;">
<div class="sort-down">下移</div>
<div class="sort-asc">上移</div>
</div>
<div>
内容22222
</div>
</div>
<div class="item" style="border: 1px solid yellow; text-align: right;">
<div style="display: flex;">
<div class="sort-down">下移</div>
<div class="sort-asc">上移</div>
</div>
<div>
内容33333
</div>
</div>
</div>
<script type="text/javascript" src="jquery-3.2.1.js"></script>
<script>
$(document).on('click', '.sort-down', function(){
//判断是否有下一个节点
if($(this).parents('.item').nextAll().length > 0){
$(this).parents('.item').next().after($(this).parents('.item').prop('outerHTML'));
$(this).parents('.item').remove();
}
}).on('click', '.sort-asc', function(){
//判断是否有上一个节点
if($(this).parents('.item').prevAll().length > 0){
$(this).parents('.item').prev().before($(this).parents('.item').prop('outerHTML'));
$(this).parents('.item').remove();
}
})
</script>
</body>
</html>