JS实现ul,li排序效果
<!DOCTYPE html>
<html>
<head>
<title>js列表排序</title>
<meta charset="utf-8">
</head>
<style type="text/css"> </style>
<script type="text/javascript">
window.onload=function(){
var oUl=document.getElementById('ul1');
var oBtn=document.getElementById('btn1');
oBtn.onclick=function(){
var aLi=document.getElementsByTagName('li'); var arr=[];
for(var i=0;i<aLi.length;i++){
arr[i]=aLi[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]);
}
}
}
</script> <body>
<input type="button" id="btn1" value="排序" />
<hr />
<ul id="ul1">
<li>32</li>
<li>25</li>
<li>3</li>
<li>18</li> </body>
</html>
JS实现ul,li排序效果的更多相关文章
- jQuery图片无缝滚动JS代码ul/li结构
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- JS 写<ul><li>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- Jquery和JS获取ul中li标签（转）
js 获取元素下面所有的li var content=document.getElementById("content"); var items=content.getElemen ...
- Jquery和JS获取ul中li标签
js 获取元素下面所有的li var content=document.getElementById("content"); var items=content.getElemen ...
- 竖向折叠二级导航JS代码（可防刷新ul/li结构）
<html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> ...
- ul li a active jquery.cookie.js
div class="righter nav-navicon" id="admin-nav"> <div class="mainer&qu ...
- css案例学习之div ul li a 实现导航效果
效果 代码 <html> <head> <title>无需表格的菜单</title> <style> body{ background-co ...
- JS和jQuery中ul li遍历获取对应的下角标
首先先看代码: html代码部分: <div id="div"> <ul> <li>1111111</li> <li>2 ...
- 用ul li实现边框重合并附带鼠标经过效果
边框重合这个效果并不难,只是我们没有真正的动手做过而已,下面让我们来谈谈用ul li如何实现边框重合,并附带鼠标经过效果 <!DOCTYPE html> <html lang=&qu ...
随机推荐
- Linux基础命令---join
join 找出两个文件中相同的字段,根据相同字段合并两个文件,将合并结果显示到标准输出. 此命令的适用范围:RedHat.RHEL.Ubuntu.CentOS.SUSE.openSUSE.Fedora ...
- 转：Process类的使用
转载自:http://www.oschina.net/code/snippet_119226_6188 一.根据进程名获取进程的用户名? 需要添加对 System.Management.dll 的引用 ...
- max file descriptors [4096] for elasticsearch process is too low, increase to at least [65536]
elasticsearch安装时遇到的错误 问题翻译过来就是:elasticsearch用户拥有的可创建文件描述的权限太低,至少需要65536: 解决办法: #切换到root用户修改 vim /etc ...
- ul点击li,增加样式
用户首次绑定后,需要选择一款头像 <!--imgList头像列表--><el-row class="regModel1"> <el-col :span ...
- Twemproxy和Redis性能压力测试
性能测试 Redis自带了一个叫 redis-benchmark的工具来模拟N个客户端同时发出M个请求,(类似于Apache ab程序),你可以使用redis-benchmark -h来查看基准参数. ...
- C++11 正则表达式简单运用
正则表达式(regular expression)是计算机科学中的一个概念,又称规则表达式,通常简写为regex.regexp.RE.regexps.regexes.regexen. 正则表达式是一种 ...
- Andriod post Api与返回值
vs后台api控制器 post接收参数----HttpContext.Current.Request.Params["account"].ToString() 返回值为对象返回, ...
- 关于Android Camera2 API 的自动对焦的坑
https://www.jianshu.com/p/280e5301b7b9 一.使用.关于Camera2的API使用,参考Google官方的例子: Camera2Basic Camera2Raw C ...
- Modbus库开发笔记之一：实现功能的基本设计（转）
源: Modbus库开发笔记之一:实现功能的基本设计
- 在Vmware中安装CentOS7
想要安装linux系统,在电脑上先装一个虚拟机,当然装双系统也是可以的.首先准备材料,3步:1.从CentOS的官网上下载CentOS7,DVD ISO版本,大概4G左右.名称:CentOS-7-x8 ...