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 相关文章推荐
javascript 用原型继承来实现对象系统
Mar 22 Javascript
基于jQuery判断两个元素是否有重叠部分的代码
Jul 25 Javascript
重写javascript中window.confirm的行为
Oct 21 Javascript
js 在定义的时候立即执行的函数表达式(function)写法
Jan 16 Javascript
使用pcs api往免费的百度网盘上传下载文件的方法
Mar 17 Javascript
js案例之鼠标跟随jquery版(实例讲解)
Jul 21 jQuery
tween.js缓动补间动画算法示例
Feb 13 Javascript
详解用JS添加和删除class类名
Mar 25 Javascript
Easyui 去除jquery-easui tab页div自带滚动条的方法
May 10 jQuery
微信小程序的注册页面包含倒计时验证码、获取用户信息
May 22 Javascript
我所理解的JavaScript中的this指向
Sep 04 Javascript
Vue使用screenfull实现全屏效果
Sep 17 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性能的21种方法介绍
2013/06/25 PHP
50个PHP程序性能优化的方法
2014/06/02 PHP
php版微信小店调用api示例代码
2016/11/12 PHP
由php中字符offset特征造成的绕过漏洞详解
2017/07/07 PHP
javascript温习的一些笔记 基础常用知识小结
2011/06/22 Javascript
jquery.idTabs 选项卡使用示例代码
2014/09/03 Javascript
基于BootStrap Metronic开发框架经验小结【四】Bootstrap图标的提取和利用
2016/05/12 Javascript
EasyUI 中combotree 默认不能选择父节点的实现方法
2016/11/07 Javascript
JS 组件系列之BootstrapTable的treegrid功能
2017/06/16 Javascript
ReactNative Image组件使用详解
2017/08/07 Javascript
Vue中引入样式文件的方法
2017/08/18 Javascript
微信小程序使用input组件实现密码框功能【附源码下载】
2017/12/11 Javascript
vue 项目如何引入微信sdk接口的方法
2017/12/18 Javascript
详解关于html,css,js三者的加载顺序问题
2019/04/10 Javascript
详解ECMAScript2019/ES10新属性
2019/12/06 Javascript
如何基于js判断浏览器版本
2020/02/20 Javascript
[02:34]肉山说——泡妞篇
2014/09/16 DOTA
wxpython中利用线程防止假死的实现方法
2014/08/11 Python
简单介绍Python中的len()函数的使用
2015/04/07 Python
Python中的各种装饰器详解
2015/04/11 Python
Python写的一个定时重跑获取数据库数据
2016/12/28 Python
Python实现字典的遍历与排序功能示例
2017/12/23 Python
浅谈Scrapy框架普通反爬虫机制的应对策略
2017/12/28 Python
对numpy的array和python中自带的list之间相互转化详解
2018/04/13 Python
浅谈Django QuerySet对象(模型.objects)的常用方法
2020/03/28 Python
opencv 实现特定颜色线条提取与定位操作
2020/06/02 Python
Python tempfile模块生成临时文件和临时目录
2020/09/30 Python
性能服装:HYLETE
2018/08/14 全球购物
中学教师实习自我鉴定
2013/09/28 职场文书
2014年服务员工作总结
2014/11/18 职场文书
教师个人培训总结
2015/02/11 职场文书
社区工作者个人总结
2015/02/28 职场文书
台风停课通知
2015/04/24 职场文书
公司老总年会致辞
2015/07/30 职场文书
青年人初次创业的“五不要”
2019/08/23 职场文书
导游词之南昌滕王阁
2019/11/29 职场文书