jquery实现节点上移、下移

最新推荐文章于 2022-10-24 15:41:22 发布

乾三_

最新推荐文章于 2022-10-24 15:41:22 发布

阅读量547

点赞数

分类专栏： JQ 文章标签： jquery javascript 前端

原文链接：https://blog.csdn.net/qq_29457999/article/details/72956822

版权

JQ 专栏收录该内容

27 篇文章 1 订阅

订阅专栏

$().prop('outerHTML')

$().html()方法是获取当前节点下的html代码，但并不包括当前节点，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>

乾三_

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jquery实现节点上移、下移

$().prop('outerHTML')$().html()方法是获取当前节点下的html代码，但并不包括当前节点，js dom里有一个属性outerHTML用来获取当前节点的html代码（包括当前节点），通过jquery的prop()方法可以拿到具体实现代码如下<DOCTYPE html><html> <head> <meta charset="utf-8"> <title>jquery实现节点上移、下移</t.
复制链接

扫一扫