js实现列表按字母排序


Posted in Javascript onAugust 11, 2020

本文实例为大家分享了js实现列表按字母排序的具体代码,供大家参考,具体内容如下

知识点

1.parentNode:返回元素父节点的属性
2.insertBefore()方法
insertBefore() 方法可在已有的子节点前插入一个新的子节点。
语法:node.insertBefore(newnode,existingnode)
newnode 节点对象 必须。要插入的节点对象
existingnode 节点对象 必须。要添加新的节点前的子节点。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>列表按字母排序</title>
</head>
<body>
<p>点击按钮按字母排序列表</p>
<button onclick="sortList()">排序</button>
<ul id="UL">
 <li>Oslo</li>
 <li>Stockholm</li>
 <li>Helsinki</li>
 <li>Berlin</li>
 <li>Rome</li>
 <li>Madrid</li>
</ul>
<script src="../js/列表按字母排序.js">
 </script>
</body>
</html>
function sortList() {
 var list=document.getElementById("UL");
 var switching=true;
 /*做一个循环*/
 while (switching){
  //不切换
  switching=false;
  var li=list.getElementsByTagName("li");
  //遍历所有的列表
  for(var i=0;i<(li.length-1);i++){
   switching=false;
   //检查下一项是否应该和当前项换位置
   if (li[i].innerHTML.toLowerCase() > li[i + 1].innerHTML.toLowerCase()) {
    switching=true;
    break;
   }
  }
  //位置互换
  if(switching){
   li[i].parentNode.insertBefore(li[i+1],li[i]);
   switching=true;
  }
 }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
需要做特殊处理的DOM元素属性的访问
Nov 05 Javascript
javascript:文字不间断向左移动的实例代码
Aug 08 Javascript
javascript对象的使用和属性操作示例详解
Mar 02 Javascript
js判断文本框输入的内容是否为数字
Dec 23 Javascript
js实现文字跑马灯效果
Feb 23 Javascript
vue2.0构建单页应用最佳实战
Apr 01 Javascript
详解React 16 中的异常处理
Jul 28 Javascript
react实现菜单权限控制的方法
Dec 11 Javascript
通过函数作用域和块级作用域看javascript的作用域链
Aug 05 Javascript
微信小程序实现左侧滑栏过程解析
Aug 26 Javascript
Element Dialog对话框的使用示例
Jul 26 Javascript
Ajax获取node服务器数据的完整步骤
Sep 20 Javascript
Vue使用轮询定时发送请求代码
Aug 10 #Javascript
vue页面引入three.js实现3d动画场景操作
Aug 10 #Javascript
详解vue中v-model和v-bind绑定数据的异同
Aug 10 #Javascript
maptalks+three.js+vue webpack实现二维地图上贴三维模型操作
Aug 10 #Javascript
React实现阿里云OSS上传文件的示例
Aug 10 #Javascript
vue+elementUI(el-upload)图片压缩,默认同比例压缩操作
Aug 10 #Javascript
使用vue引入maptalks地图及聚合效果的实现
Aug 10 #Javascript
You might like
PHP设计聊天室步步通
2006/10/09 PHP
在PHP中操作Excel实例代码
2010/04/29 PHP
计算php页面运行时间的函数介绍
2013/07/01 PHP
ThinkPHP模板之变量输出、自定义函数与判断语句用法
2014/11/01 PHP
PHP中foreach()用法汇总
2015/07/02 PHP
PHP从尾到头打印链表实例讲解
2018/09/27 PHP
phpQuery采集网页实现代码实例
2020/04/02 PHP
javascript dom 基本操作小结
2010/04/11 Javascript
js parseInt(&quot;08&quot;)未指定进位制问题
2010/06/19 Javascript
js解析与序列化json数据(一)json.stringify()的基本用法
2013/02/01 Javascript
nodejs通过phantomjs实现下载网页
2015/05/04 NodeJs
jQuery实现类似标签风格的导航菜单效果代码
2015/08/25 Javascript
JS实现的竖向折叠菜单代码
2015/10/21 Javascript
H5用户注册表单页 注册模态框!
2016/09/17 Javascript
Bootstrap栅格系统学习笔记
2016/11/25 Javascript
关于vue的语法规则检测报错问题的解决
2018/05/21 Javascript
基于JS实现快速读取TXT文件
2020/08/25 Javascript
[01:11]辉夜杯战队访谈宣传片—CDEC.Y
2015/12/26 DOTA
以视频爬取实例讲解Python爬虫神器Beautiful Soup用法
2016/01/20 Python
python pandas库中DataFrame对行和列的操作实例讲解
2018/06/09 Python
使用Python进行目录的对比方法
2018/11/01 Python
python3使用print打印带颜色的字符串代码实例
2019/08/22 Python
django 解决自定义序列化返回处理数据为null的问题
2020/05/20 Python
浅谈Python中的生成器和迭代器
2020/06/19 Python
python 利用panda 实现列联表(交叉表)
2021/02/06 Python
如何用Matlab和Python读取Netcdf文件
2021/02/19 Python
HTML5 语音搜索只需一句代码
2013/01/03 HTML / CSS
Amara美国站:英国高端家居礼品网站,世界各地的奢侈家具品牌
2017/07/26 全球购物
SmartBuyGlasses英国:购买太阳镜和眼镜
2018/01/29 全球购物
前台接待岗位职责
2013/12/03 职场文书
大学生学习党课思想汇报
2014/01/03 职场文书
岗位廉洁从业承诺书
2014/03/28 职场文书
个人投资计划书
2014/05/01 职场文书
浅谈Redis存储数据类型及存取值方法
2021/05/08 Redis
聊聊golang中多个defer的执行顺序
2021/05/08 Golang
Android基于Fresco实现圆角和圆形图片
2022/04/01 Java/Android