23、DOM的高级应用-------关于Ul中的 li 的排序

最新推荐文章于 2020-02-19 14:36:54 发布

Bwz_Learning

最新推荐文章于 2020-02-19 14:36:54 发布

阅读量2.1k

点赞数 2

分类专栏： JavaScript_Bak

本文链接：https://blog.csdn.net/zbw18297786698/article/details/51683816

版权

JavaScript_Bak 专栏收录该内容

49 篇文章 0 订阅

订阅专栏

1、排序

• 移动Li

• 元素排序：转换——排序——插入

//父节点.appendChild()的实现，会把这个元素节点从ul里面删除，然后在加入。
// 就好比，人上班一样。再加入新的公司，要在当前的公司，离职一样

2、排序的实现代码

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>DOM中的UL的排序</title>
		<script type="text/javascript">
			window.onload = function() {
				var oBtn = document.getElementById("btn1");
				var oUl = document.getElementById("ul1");
				oBtn.onclick = function() {
					var aLi = oUl.getElementsByTagName("li");
					var arr = [];
					var i = 0;
					//1、转成数组
					for (i = 0; i < aLi.length; i++) {
						arr[i] = aLi[i];
					}
					//console.log(arr)
					//2、数组排序
					arr.sort(function(li1, li2) {
						return parseInt(li1.innerHTML) - parseInt(li2.innerHTML);
					});
					//3、重新插入
					for (i = 0; i < arr.length; i++) {
						oUl.appendChild(arr[i]);
						//父节点.appendChild()的实现，会把这个元素节点从ul里面删除，然后在加入。
						// 就好比，人上班一样。再加入新的公司，要在当前的公司，离职一样
					}
				}
			}
		</script>
	</head>

	<body>
		<button type="button" id="btn1">排序</button>
		<ul id="ul1">
			<li>23</li>
			<li>66</li>
			<li>12</li>
			<li>6</li>
			<li>88</li>
		</ul>
	</body>

</html>

Bwz_Learning

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
23、DOM的高级应用-------关于Ul中的 li 的排序

1、排序 • 移动Li • 元素排序：转换——排序——插入 //父节点.appendChild()的实现，会把这个元素节点从ul里面删除，然后在加入。 // 就好比，人上班一样。再加入新的公司，要在当前的公司，离职一样2、排序的实现代码 DOM中的UL的排序 window.onload = fun
复制链接

扫一扫

专栏目录