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之解决IE下不渲染的bug
Jun 29 Javascript
JavaScript 放大镜 移动镜片效果代码
May 09 Javascript
浅析js设置控件的readonly与enabled属性问题
Dec 25 Javascript
js实现模拟计算器退格键删除文字效果的方法
May 07 Javascript
JavaScript文本框脚本编写的注意事项
Jan 25 Javascript
浅谈Node.js ORM框架Sequlize之表间关系
Jul 24 Javascript
JS操作时间 - UNIX时间戳的简单介绍(必看篇)
Aug 16 Javascript
如何抽象一个Vue公共组件
Oct 17 Javascript
解决angular双向绑定无效果,ng-model不能正常显示的问题
Oct 02 Javascript
基于Taro的微信小程序模板消息-获取formId功能模块封装实践
Jul 15 Javascript
Vue中使用Lodop插件实现打印功能的简单方法
Dec 19 Javascript
js正则匹配多个全部数据问题
Dec 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数组的一些常见操作汇总
2011/07/17 PHP
PHP中strtr字符串替换用法详解
2014/11/26 PHP
php中session定期自动清理的方法
2015/11/12 PHP
php curl模拟post请求和提交多维数组的示例代码
2015/11/19 PHP
tp5(thinkPHP5框架)使用DB实现批量删除功能示例
2019/05/28 PHP
一个JS翻页效果
2007/07/23 Javascript
JS 的应用开发初探(mootools)
2009/12/19 Javascript
Array.prototype 的泛型应用分析
2010/04/30 Javascript
70+漂亮且极具亲和力的导航菜单设计国外网站推荐
2011/09/20 Javascript
文本框只能选择数据到文本框禁止手动输入
2013/11/22 Javascript
jQuery中contents()方法用法实例
2015/01/08 Javascript
Javascript中的作用域和上下文深入理解
2015/07/03 Javascript
JS采用绝对定位实现回到顶部效果完整实例
2016/06/20 Javascript
Ajax的概述与实现过程
2016/11/18 Javascript
bootstrap导航栏、下拉菜单、表单的简单应用实例解析
2017/01/06 Javascript
完美解决axios在ie下的兼容性问题
2018/03/05 Javascript
详解VSCode配置启动Vue项目
2019/05/14 Javascript
vue+element创建动态的form表单及动态生成表格的行和列
2019/05/20 Javascript
浅谈js数组splice删除某个元素爬坑
2020/10/14 Javascript
mustache.js实现首页元件动态渲染的示例代码
2020/12/28 Javascript
js正则表达式简单校验方法
2021/01/03 Javascript
js闭包和垃圾回收机制示例详解
2021/03/01 Javascript
python复制与引用用法分析
2015/04/08 Python
python抽取指定url页面的title方法
2018/05/11 Python
Django在pycharm下修改默认启动端口的方法
2019/07/26 Python
使用Python获取爱奇艺电视剧弹幕数据的示例代码
2021/01/12 Python
印度电子产品购物网站:Vijay Sales
2021/02/16 全球购物
中专毕业自我鉴定
2013/10/16 职场文书
环境工程专业个人求职信
2013/12/05 职场文书
四风个人对照检查材料思想汇报
2014/09/25 职场文书
财务负责人岗位职责
2015/02/03 职场文书
学校百日安全活动总结
2015/05/07 职场文书
2015年村级财务管理制度
2015/08/04 职场文书
班委竞选稿范文
2015/11/21 职场文书
Window server中安装Redis的超详细教程
2021/11/17 Redis
Python创建SQL数据库流程逐步讲解
2022/09/23 Python