<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

	<head>

		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

		<title>New Web Project</title>

		<script>

			window.onload=function(){

				var oU1=document.getElementById('uAge1');

				var oU2=document.getElementById('uAge2');

				var oBtn=document.getElementById('btn');

				function sortNumber(l1,l2){

					var n1=parseInt(l1.innerHTML);

					var n2=parseInt(l2.innerHTML);

					return n1-n2;

				}

				oBtn.onclick=function(){

					var oLis=oU1.children;

					var oAry=[];

					for(var j=0;j<oLis.length;j++)

					{

						oAry[j]=oLis[j];

					}

					oAry.sort(sortNumber);

					for(var i=0;i<oLis.length;i++)

					{

						oU1.appendChild(oAry[i]);

					}

				};

			};

		</script>

	</head>

	<body>

		<ul id="uAge1">

			<li>15</li>

			<li>66</li>

			<li>9</li>

			<li>10</li>

			<li>30</li>

		</ul>

		<input id="btn" type="button" value="排序" />

	</body>

</html>

注意事项：

1.appendChild()调用时，会有两步操作

  1. 首先从父级的元素中中删除本元素
  2. 将此元素加入到调用这个函数的父级

依据这两点。我们能够对元素集进行排序操作。

2.oU1.children获得元素集合跟 oU1.getElementsByTagName()获得的集合是等价的

3. sort()排序操作，是Array类型的数组独有的操作函数，集合不能使用，所以须要将获得的集合转换成数组才干够调用这个函数

执行结果例如以下图：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMjE5MzMzMA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

版权声明：本文博主原创文章。博客，未经同意不得转载。

javascript 次序li的更多相关文章

  1. javascript中li标签的排序和数组sort的用法

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  2. JavaScript实现li隔行变色

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  3. JavaScript进阶--慕课网学习笔记

                         JAVASCRIPT—进阶篇 给变量取个名字(变量命名) 变量名字可以任意取,只不过取名字要遵循一些规则: 1.必须以字母.下划线或美元符号开头,后面可以跟字 ...

  4. Jquery和JS获取ul中li标签（转）

    js 获取元素下面所有的li var content=document.getElementById("content"); var items=content.getElemen ...

  5. Jquery和JS获取ul中li标签

    js 获取元素下面所有的li var content=document.getElementById("content"); var items=content.getElemen ...

  6. javaScript基础练习题-下拉框制作(CSS)

    http://www.imooc.com/video/155 慕课网的视频,直接上代码 <!DOCTYPE hmtl> <html> <head> <meta ...

  7. 使用JavaScript创建我的分页

    把下面的方法放到一个js文件,页面引用他就行了 JavaScript function PageList(PageSize, PageIndex, TotalCount, ParList) { $(& ...

  8. 6、JavaScript进阶篇③——浏览器对象、Dom对象

    一.浏览器对象 1. window对象 window对象是BOM的核心,window对象指当前的浏览器窗口. window对象方法: 注意:在JavaScript基础篇中,已讲解了部分属性,windo ...

  9. JavaScript: Advanced

    DOM 1. 节点 getElementsByName方法 <!DOCTYPE HTML> <html> <head> <script type=" ...

随机推荐

  1. UIScrollView（滚动试图）

    UIScrollView(滚动试图) 1.简介 为什么有UISCrollView: 在iOS开发中,由于移动设备的屏幕大小有限,所以不能像PC一样显示很多内容,因此当手机屏幕需要展示的内容较多超出一个 ...

  2. C++ BYTE数组转字符串

    第一种情况: BYTE[0]=Ox12 BYTE[1]=0x34 BYTE[2]=0x56 最后要转换成字符串123456 另外一种情况: BYTE[0]=Ox12 BYTE[1]=0x34 BYTE ...

  3. [RxJS] Replace zip with combineLatest when combining sources of data

    This lesson will highlight the true purpose of the zip operator, and how uncommon its use cases are. ...

  4. [Angular2 Animation] Control Undefined Angular 2 States with void State

    Each trigger starts with an “undefined” state or a “void” state which doesn’t match any of your curr ...

  5. <p><img src="http://img.blog.csdn.net/20150823142545135?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt=""></p>

    /* 实现功能:用顺序表实现栈的各种操作 编译环境:Windows 64b,vc6.0 日期: 2015/7/20 作者:wtt561111 */ #define stack_max_num 10 # ...

  6. 如何知道刚刚插入数据库那条数据的id

    如何知道刚刚插入数据库那条数据的id 一.总结 一句话总结:这些常见功能各个框架里面都有,可以查看手册,thinkphp里面是$userId = Db::name('user')->getLas ...

  7. ZOJ Special AC String 水

    http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=3702 题目大意: 对于给定的一个字符串,满足如下要求输出AC,否则WA(好吧我 ...

  8. crx 【 集合 】

    Vimium dbepggeogbaibhgnhhndojpepiihcmeb-1.64-Crx4Chrome.com.crx https://www.crx4chrome.com/down/731/ ...

  9. php 中英文字符串截取,字符串长度

    在做PHP开发的时候,由于我国的语言环境问题,所以我们常常需要对中文进行处理.在PHP中,我们都知道有专门的mb_substr和mb_strlen函数,可以对中文进行截取和计算长度,但是,由于这些函数 ...

  10. Android自己定义控件2-简单的写字板控件

    概述 上一篇文章我们对自己定义控件进行了一个大体的知识介绍. 今天就来学习自己定义一个简单的写字板控件. 先来看看效果图 就是简单的依据手指写下的轨迹去画出内容 实现 在上一篇文章里提到了androi ...