li排序
html <ul id="ul1">
<li>9</li>
<li>2</li>
<li>7</li>
<li>4</li>
<li>11</li>
</ul> <input type="button" value="排序" id="btn1" />
思路:
1,将li集合插入一个数组里
2,对数组进行排序
3,将排序后的数组appendChild那个ul里 说明:
appendChild的用法,见
http://www.cnblogs.com/huaci/p/3823031.html li集合,它并不等同于数组,所以也没有sort方法 js代码 window.onload = function(){
var oUl = document.getElementById("ul1");
var oBtn = document.getElementById("btn1"); oBtn.onclick = function(){
var arr = [];
for(var i=0; i<oUl.children.length; i++){
arr.push(oUl.children[i]);
} arr.sort(function(li1,li2){
var n1 = parseInt(li1.innerHTML);
var n2 = parseInt(li2.innerHTML);
return n1-n2;
}); for(var i=0; i<arr.length; i++){
oUl.appendChild(arr[i]);
} } }
li排序的更多相关文章
- li排序的两种方法
1.一般做法 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <ti ...
- JS实现ul,li排序效果
<!DOCTYPE html> <html> <head> <title>js列表排序</title> <meta charset=& ...
- python入门之排序,文件操作
排序 li.sort() 对li列表从小到大排序,直接更新li列表 sorted(li) 返回一个li排序后的列表,并非直接对li作更新 列表元素必须是同一种数据类型 文件操作 打开文件: f = o ...
- 常用的-->查找算法与排序算法
顺序查找 从列表第一个元素开始,顺序进行搜索,直到找到为止. 二分查找 从有序列表的候选区data[0:n]开始,通过对待查找的值与候选区中间值的比较,可以使候选区减少一半. li = [1, 2, ...
- React的井字过三关(2)
这篇笔记是官方教程的延续笔记,所有代码基于第一篇笔记的结尾代码.旨在解决教程后面提出的五个问题. 一 . 用(X,Y)来取代原有的数字坐标 原来的数字坐标是这样的: 现在的要求是把原来的代码坐标改为二 ...
- Python学习【第九篇】函数
函数 函数是什么? 函数是组织好的,可重复使用的,用来实现单一,或相关联功能的代码段. 在学习函数之前,一直遵循:面向过程编程,即:根据业务逻辑从上而下实现功能,其往往用一段代码来实现指定功能,开发过 ...
- JQuery基础总结上
最近在慕课网学习JQuery基础课程,发现只是跟随网站的课程学习而不去自己总结扩展的话,很难达到真正学会理解的地步. 于是先在网站上草草过了一遍课程,然后借着今天的这个时间边记录边重新整理学习一下. ...
- python容器类型:列表,字典,集合等
容器的概念我是从C++的STL中学到的 什么是容器? 容器是用来存储和组织其他对象的对象. 也就是说容器里面可以放很多东西,这些东西可以是字符串,可以是整数,可以是自定义类型,然后把这些东西有组织的存 ...
- JAVA_Collection容器
因为项目的需要,今天抽时间把JAVA中的容器复习了一下,为了以后的不时之需,现在把它记下来. 容器有其名,知其意,用来盛放数据的集合,JAVA中为我们提供了三种容器类:set.list.map,三种容 ...
随机推荐
- java学习笔记07--日期操作类
java学习笔记07--日期操作类 一.Date类 在java.util包中定义了Date类,Date类本身使用非常简单,直接输出其实例化对象即可. public class T { public ...
- java学习笔记12--国际化
java学习笔记12--国际化 国际化的操作就是指一个程序可以同时适应多门语言,即:如果现在程序者是中国人,则会以中文为显示文字,如果现在程序的使用者是英国人,则会以英语为显示的文字,也就是说可以通过 ...
- Storyboard 经常用法总结-精华版
1.prepareForSegue: Now we know what the destinationViewController is we can set its data properties. ...
- Linux创建修改删除用户和组
Linux 创建修改删除用户和组 介绍 在日常的维护过程中创建用户操作用的相对会多一些,但是在这个过程中涉及到的知识点就不单单就是useradd了,接下来就来详细了解账号管理的相关信息. 用户信息 先 ...
- poj1269(直线交点)
传送门:Intersecting Lines 题意:给出N组直线,每组2条直线,求出直线是否相交.如果共线则输出LINE,相交则输入点坐标,否则输出NONE. 分析:模板裸题,直接上模板... #in ...
- 【ThinkingInC++】52、函数内部的静态变量
/** * 书本:[ThinkingInC++] * 功能:函数内部的静态变量 * 时间:2014年9月17日18:06:33 * 作者:cutter_point */ #include " ...
- Spark实践的阶段性总结
写这篇小总结是因为前段时间是自己业余时间对Spark相关进行了些探索,接下来可能有别的同事一起加入,且会去借用一些别的服务器资源,希望可以借此理下思路. 实践Spark的原因 在之前Spark简介及安 ...
- tera term 残ALT债券
Setup -> Keyboard对话框 Meta key变: left 版权声明:本文博客原创文章,博客,未经同意,不得转载.
- SE 2014年3月31日
一. 描述OSPF划分区域的优势. OSPF划分区域的优势主要表现在以下几个方面: 1. 当网络中路由器的数量增大时,划分区域有利于减轻一部分性能较低的设备的处理和维护LSA数据库. 2. 区域的划分 ...
- hdu1166(线段树)
题目连接:http://acm.hdu.edu.cn/showproblem.php?pid=1166 线段树功能:update:单点增减 query:区间求和 #pragma comment(lin ...