<li>元素的排序
要点：
- getElementsByTagName("li")返回的是HTMLCollection对象，这个对象不同于Array对象，不能使用sort()方法进行排序~
- 下面方法的要点是借壳Array对象，同时使用了appendChild的特性~
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
window.onload = function () {
var ul = document.getElementById("ul1");
var btn = document.getElementById("btn1");
var aLi = ul.getElementsByTagName("li"); btn.onclick = function () {
var arr = []; // 1. 创建一个Array对象 for (var i=0; i<aLi.length; i++) {
arr[i] = aLi[i]; // 2. 借壳Array对象
}
// 3. 排序
arr.sort(function (li1, li2) {
return parseInt(li1.innerHTML) < parseInt(li2.innerHTML);
});
// 4. 利用appendChild的特性
for (var i=0; i<arr.length; i++) {
ul.appendChild(arr[i]);
}
}
}
</script>
</head>
<body>
<input type="button" id="btn1" value="sort" />
<ul id="ul1">
<li>34</li>
<li>25</li>
<li>9</li>
<li>88</li>
<li>54</li>
</ul>
</body>
</html>
<li>元素的排序的更多相关文章
- JQuery利用sort对DOM元素进行排序
前言 排序对于我们是再熟悉不过了,在绝大数应用程序中都会有这样一个场景:当我们从服务器端获取一个列表时,在界面上进行渲染,我们可以会依赖于某一个规则来进行排序,当然此时绝大多数会再次与服务器进行交互来 ...
- 在li元素中放入img图片时li的高度问题
在li元素中放入img图片时li的高度会比img图片的高度多出几个像素,解决这个问题只需要将img元素的css设置成vertical-align: middle;就可以解决.
- sort() 方法用于对数组的元素进行排序
语法 arrayObject.sort(sortby) 参数 描述 sortby 可选.规定排序顺序.必须是函数. 返回值 对数组的引用.请注意,数组在原数组上进行排序,不生成副本. 说明 如果调用该 ...
- 对数组元素进行排序的方法总结（利用C++）
首先,对数组元素进行排序方法总结为以下两类: 一.简单排序算法(时间复杂度O(n*n)) 1.插入排序 2.选择排序 3.交换排序,即冒泡排序 二.先进排序算法(时间复杂度O(n*logn)) 1.快 ...
- jQuery.sort对DOM元素进行排序
实例: 每个tr的第三列显示的都是数字,我们就以这数字列作为排序依据,方法就是利用jquery的sort()方法. 首先,利用jquery选择器获取每个tr元素,获取回来是一个数据: var $trs ...
- 使用DOM的方法获取所有li元素，然后使用jQuery()构造函数把它封装为jQuery对象
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 使用jQuery匹配文档中所有的li元素，返回一个jQuery对象，然后通过数组下标的方式读取jQuery集合中第1个DOM元素，此时返回的是DOM对象，然后调用DOM属性innerHTML,读取该元素 包含的文本信息
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- [ActionScript 3.0] 对数组中的元素进行排序Array.sort()的方法
对数组中的元素进行排序. 此方法按 Unicode 值排序. (ASCII 是 Unicode 的一个子集.) 默认情况下,Array.sort()按以下方式进行排序: 1. 排序区分大小写(Z优先于 ...
- JavaScript 操作选中当前的li元素并给他添加select类
JavaScript 操作选中当前的li元素并给他添加select类.之前都是使用jquery写的,今天使用JavaScript写一个. <!DOCTYPE html> <html ...
随机推荐
- 通过SSH解压缩.tar.gz、.gz、.zip文件的方法
一般在linux下,常用的压缩格式有如下几个: .tar.gz..gz..zip 解压 .tar.gz 文件命令: tar -zxvf xxx.tar.gz 解压 .gz 文件命令: gunzip x ...
- unittest 报告——HTMLTestRunner/BSTestRunner+代码覆盖率
1. HTMLTestRunner.py 代码(python3)如下: python2: https://github.com/tungwaiyip/HTMLTestRunner "&qu ...
- 【u-boot】u-boot对设备树的节点解析（转）
1,设备树的引入2,uboot本身对设备树的支持3,对uboot中设备树节点解析代码的分析 (1)上一篇文章中提到函数 dm_init_and_scan(bool pre_reloc_only) 中有 ...
- kettle案例实现
案例一.把stu1的数据按id同步到stu2,stu2有相同id则更新数据 在kettle中新建转换 点击左上角文件—新建—转换到核心对象界面,点击输入,找到表输入拖拽到中间 双击表输入,在数据库连接 ...
- HDU 6035 - Colorful Tree | 2017 Multi-University Training Contest 1
/* HDU 6035 - Colorful Tree [ DFS,分块 ] 题意: n个节点的树,每个节点有一种颜色(1~n),一条路径的权值是这条路上不同的颜色的数量,问所有路径(n*(n-1)/ ...
- nodejs （下）（设置响应参数）
响应: 可以自定义设置状态码(状态码范围内的):res.statusCode = 404; 修改响应头信息: res.setHeader('content-type','text/html ...
- js深度克隆
function highClone(oldObj){ var cloneObj; if(oldObj.constructor==Object || oldObj.constructor==Array ...
- PSFTP使用简单教程
psftp是putty工具下的一个sftp工具.SFTP(Secure File Transfer Protocol)安全文件传输协议,SFTP是SSH的一部分,是一种传输档案至 Blogger 伺服 ...
- 9030PCI CAN驱动开发点滴
1.配置EEPROM. 使用PlxMon打开9030,基本修改Spacex(0,1,2,3), Chip selectx(0,1,2,3), 中断状态INTCSR(0x74), 其他(0x78),详细 ...
- js获取键盘编码
原理:键盘上的按键都有各自的键码,通过这个键码可以来判断按下的是哪个键,下面函数可以获取键盘的键码,按下键盘按键就会在控制台打印出相应的键码 document.addEventListener(&qu ...