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 相关文章推荐
js 字符串操作函数
Jul 25 Javascript
网页右键ie不支持event.preventDefault和event.returnValue (需要加window)
Feb 22 Javascript
使用JQuery快速实现Tab的AJAX动态载入(实例讲解)
Dec 11 Javascript
使用jQuery实现更改默认alert框体
Apr 13 Javascript
js实现发送验证码后的倒计时功能
May 28 Javascript
浅谈如何实现easyui的datebox格式化
Jun 12 Javascript
Bootstrap源码解读模态弹出框(11)
Dec 28 Javascript
jquery实现input框获取焦点的方法
Feb 06 Javascript
JavaScript 上传文件(psd,压缩包等),图片,视频的实现方法
Jun 19 Javascript
Vue商品控件与购物车联动效果的实例代码
Jul 21 Javascript
vue登录注册实例详解
Sep 14 Javascript
React中使用Vditor自定义图片详解
Dec 25 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中for与foreach的区别分析
2011/03/09 PHP
浅析PHP中strlen和mb_strlen的区别
2014/08/31 PHP
phplist及phpmailer(组合使用)通过gmail发送邮件的配置方法
2016/03/30 PHP
PHP在同一域名下两个不同的项目做独立登录机制详解
2017/09/22 PHP
php安装扩展mysqli的实现步骤及报错解决办法
2017/09/23 PHP
php利用云片网实现短信验证码功能的示例代码
2017/11/18 PHP
Javascript中暂停功能的实现代码
2007/03/04 Javascript
js 页面输出值
2008/11/30 Javascript
解决IE下select标签innerHTML插入option的BUG(兼容IE,FF,Opera,Chrome,Safari)
2010/05/13 Javascript
jQuery实现的类flash菜单效果代码
2010/05/17 Javascript
基于Jquery 解决Ajax请求的页面 浏览器后退前进功能,页面刷新功能实效问题
2010/12/11 Javascript
使用js判断数组中是否包含某一元素(类似于php中的in_array())
2013/12/12 Javascript
javascript实现锁定网页、密码解锁效果(类似系统屏幕保护效果)
2014/08/15 Javascript
$.extend 的一个小问题
2015/06/18 Javascript
利用JavaScript脚本实现滚屏效果的方法
2015/07/07 Javascript
JavaScript截取、切割字符串的技巧
2016/01/07 Javascript
JavaScript中如何使用cookie实现记住密码功能及cookie相关函数介绍
2016/11/10 Javascript
JS访问DOM节点方法详解
2016/11/29 Javascript
JavaScript中的FileReader图片预览上传功能实现代码
2017/07/24 Javascript
Angular 容器部署的方法
2018/04/17 Javascript
Typescript 中的 interface 和 type 到底有什么区别详解
2019/06/18 Javascript
在Linux上安装Python的Flask框架和创建第一个app实例的教程
2015/03/30 Python
Python基于matplotlib画箱体图检验异常值操作示例【附xls数据文件下载】
2019/01/07 Python
15行Python代码实现网易云热门歌单实例教程
2019/03/10 Python
在python中使用nohup命令说明
2020/04/16 Python
python3中datetime库,time库以及pandas中的时间函数区别与详解
2020/04/16 Python
Python flask框架如何显示图像到web页面
2020/06/03 Python
Pycharm配置lua编译环境过程图解
2020/11/28 Python
意大利消费电子产品购物网站:SLG Store
2019/12/26 全球购物
Madda Fella官网:美国冒险家服装品牌
2020/01/16 全球购物
美国领先的宠物用品和宠物食品零售商:Petco
2020/10/28 全球购物
医学生自荐信范文
2013/12/03 职场文书
合作意向协议书范本
2014/03/31 职场文书
物业管理委托协议(2篇)
2014/09/23 职场文书
2014年镇党建工作汇报材料
2014/11/02 职场文书
python字典的元素访问实例详解
2021/07/21 Python