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

心已赠人 2022-09-21 04:58 73阅读 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>

发表评论取消回复

表情：

评论列表（有 0 条评论，73人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS3中ul,li{}； ul li{}； ul＞li{}有何区别

![a09384c31d2f3403435ddb8d7e617445.jpeg][] 转自：[微点阅读][Link 1] [https://www.weidianyuedu.

分手后的思念是犯贱/ 2024年03月29日 16:32/ 0 赞/ 100 阅读

相关 Ul、Li的list-style-type 属性

Ul、Li的list-style-type 属性今天用到序列圆点的，直接用<li></li>的通不过w3c检测，必须和ul或ol结合使用，但问题是用了ul后左边空出了很

待我称王封你为后i/ 2023年01月10日 05:26/ 0 赞/ 149 阅读

相关 ul li列表排序

在一个列表中，每一项都有多个数据，像这样 <ul class="datalist"> <li class="item"> <span c

以你之姓@/ 2022年10月16日 09:59/ 0 赞/ 238 阅读

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

1、排序 • 移动Li • 元素排序：转换——排序——插入 //父节点.appendChild()的实现，会把这个元素节点从ul

心已赠人/ 2022年09月21日 04:58/ 0 赞/ 74 阅读

相关 css控制UL LI 的样式详解

<span style="font-size:14px;"><div id="menu"> <span style="white-space:pre

￡神魔★判官ぃ/ 2022年08月08日 12:55/ 0 赞/ 80 阅读

相关 html中ul li前面小黑点样式 ul li一些样式

对于很多人用div来做网站时，总会用到，但在显示效果时前面总是会有一个小黑点，这个令很多人头痛，但又找不到要源，其它我们可以用以下方法来清除。 1、在CSS中写

爱被打了一巴掌/ 2022年07月19日 05:11/ 0 赞/ 325 阅读

相关 html中去除ul,ol,li标签的样式列表排序点

![70][] 在ol,ul,li标签样式中添加list-style:none; 部分教学添加padding: 0px; margin: 0px;就可以使用，但

心已赠人/ 2022年05月28日 02:56/ 0 赞/ 212 阅读

相关 JavaScript获取ul中li个数的方法

有这样一段HTML代码： <ul id="myViewMore "> <li>1</li> <li>2</li> <l

本是古典何须时尚/ 2022年04月17日 06:55/ 0 赞/ 222 阅读

相关 jquery 如何获取ul中li的值

> html页面代码如下 > > <span></span>显示选中的li的值 <span id="tresult"></span> <ul style

旧城等待，/ 2022年02月24日 12:34/ 0 赞/ 1156 阅读

相关 UL-LI 标签结合CSS的运用

UL-LI 标签结合CSS的运用在CSS布局中，ul,li的运用是非常常见的。配合DIV与CSS，创建无表格布局。其实Dreamweaver中也有自带的CSS布局的

矫情吗；*/ 2021年09月10日 04:28/ 0 赞/ 546 阅读