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 相关文章推荐
function foo的原型与prototype属性解惑
Nov 19 Javascript
通过正则格式化url查询字符串实现代码
Dec 28 Javascript
Javascript表格翻页效果实现思路及代码
Aug 23 Javascript
JavaScript使用HTML5的window.postMessage实现跨域通信例子
Apr 11 Javascript
JavaScript作用域链示例分享
May 27 Javascript
jQuery中scrollLeft()方法用法实例
Jan 16 Javascript
Javascript实现检测客户端类型代码封包
Dec 03 Javascript
去除html代码里面的script正则方法
May 19 Javascript
jQuery页面元素动态添加后绑定事件丢失方法,非 live
Jun 16 Javascript
微信小程序 下拉菜单简单实例
Apr 13 Javascript
详解angularjs的数组传参方式的简单实现
Jul 28 Javascript
webpack自动打包和热更新的实现方法
Jun 24 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桌面中心(一) 创建数据库
2007/03/11 PHP
JS+PHP实现用户输入数字后显示最大的值及所在位置
2017/06/19 PHP
详解PHP如何更好的利用PHPstorm的自动提示
2017/08/18 PHP
Laravel5.1框架注册中间件的三种场景详解
2019/07/09 PHP
ThinkPHP 5.x远程命令执行漏洞复现
2019/09/23 PHP
javascript dom代码应用 简单的相册[firefox only]
2010/06/12 Javascript
JQUERY实现左侧TIPS滑进滑出效果示例
2013/06/27 Javascript
Jquery 类网页微信二维码图块滚动效果具体实现
2013/10/14 Javascript
Document:getElementsByName()使用方法及示例
2013/10/28 Javascript
JS使用getComputedStyle()方法获取CSS属性值
2014/04/23 Javascript
js中javascript:void(0) 真正含义
2020/11/05 Javascript
Laravel中常见的错误与解决方法小结
2016/08/30 Javascript
浅谈JavaScript异步编程
2017/01/20 Javascript
JavaScript中0、空字符串、'0'是true还是false的知识点分享
2019/09/16 Javascript
Element DateTimePicker日期时间选择器的使用示例
2020/07/27 Javascript
Python迭代器和生成器介绍
2015/03/06 Python
Python正规则表达式学习指南
2016/08/02 Python
浅谈Python中的作用域规则和闭包
2018/03/20 Python
python生成带有表格的图片实例
2019/02/03 Python
django中瀑布流写法实例代码
2019/10/14 Python
Python操作redis和mongoDB的方法
2019/12/19 Python
python ImageDraw类实现几何图形的绘制与文字的绘制
2020/02/26 Python
python opencv 图像边框(填充)添加及图像混合的实现方法(末尾实现类似幻灯片渐变的效果)
2020/03/09 Python
迪斯尼商品官方网站:ShopDisney
2016/08/01 全球购物
小学生获奖感言范文
2014/02/02 职场文书
员工考核评语大全
2014/04/26 职场文书
迎国庆演讲稿
2014/09/15 职场文书
2014年城市管理工作总结
2014/12/02 职场文书
2015应届毕业生自荐信范文
2015/03/05 职场文书
学校实习推荐信
2015/03/27 职场文书
放假通知
2015/04/14 职场文书
结婚堵门保证书
2015/05/08 职场文书
2015年机关作风和效能建设工作总结
2015/07/23 职场文书
2019年“我为祖国点赞”演讲稿(3篇)
2019/09/26 职场文书
CSS3鼠标悬浮过渡缩放效果
2021/04/17 HTML / CSS
MySQL日期时间函数知识汇总
2022/03/17 MySQL