<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 ...
随机推荐
- Python标准库: turtle--海龟绘图。
turtle --- 海龟绘图 (点击查看官方文档.) 简介 import turtle # 调用该库.Turtle的实例对象,默认命名为turtle. turtle.forward(10) from ...
- Web Api(3)
Web API中的路由. 路由机制会把一个请求的URL映射到一个Controller上面的Action.这一点很关键.也就说你发送一个Http请求,MVC框架会解析这个请求的URL,之后尝试把它去映射 ...
- loj2718 「NOI2018」归程[Kruskal重构树+最短路]
关于Kruskal重构树可以翻阅本人的最小生成树笔记. 这题明显裸的Kruskal重构树. 然后这题限制$\le p$的边不能走,实际上就是要满足走最小边权最大的瓶颈路,于是跑最大生成树,构建Krus ...
- Java中的equals,==,compareTo和compare的比较
Java中的equals(),==,compareTo()和compare() 首先只有==可以用作两个基本类型数据之间的比较,当然是值比较.当用作两个对象比较时,比较的是对象引用,而不是值比较. 其 ...
- FutureWarning: get_value is deprecated and will be removed in a future release. Please use .at[] or .iat[] accessors instead print(labels_df.get_value(patients,col=1))
这是因为pandas的版本高了,0.21之后就已经将这个方法干掉了.直接装成0.20之前的就好
- PHP类知识----析构方法点滴
网页执行完毕 手动调用析构方法 通过unset() 应用场景:断开mysql的连接 不同情况下,析构方法调用的时机不同,程序执行顺序如下 <?php class mycoach { public ...
- 小程序上传base64的图片,可上传多张
微信小程序上传图片转化为base64格式 clickimage: function(e) { var index = e.currentTarget.dataset.index; var count ...
- C#静态变量 总结
在C#程序中,没有全局变量的概念,这意味着所有的成员变量只有该类的实例才能操作这些数据,这起到了“信息隐藏”的作用.但有些时候,这样做却不是个明智的选择. 假设我们要定义一个图书类,要求该类能保存图书 ...
- easyui datagrid 选中行效果
转:http://blog.csdn.net/hzw2312/article/details/27534065 jquery easyui datagrid 获取Checked选择行(勾选行)数据 g ...
- luoguP3371 【模板】单源最短路径
P3371 [模板]单源最短路径 3K通过 10.7K提交 题目提供者 HansBug 标签 云端↑ 难度 普及/提高- 时空限制 1s / 128MB 题目描述 如题,给出一个有向图,请输出从某一点 ...