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系列(16) 闭包(Closures)
Apr 12 Javascript
如何将一个String和多个String值进行比较思路分析
Apr 22 Javascript
javascript生成随机数的方法
May 16 Javascript
浏览器复制插件zeroclipboard使用指南
Mar 26 Javascript
Bootstrap自定义文件上传下载样式
May 26 Javascript
Avalonjs双向数据绑定与监听的实例代码
Jun 23 Javascript
了解前端理论:rscss和rsjs
May 23 Javascript
微信小程序实现原生步骤条
Jul 25 Javascript
使用layui前端框架弹出form表单以及提交的示例
Oct 25 Javascript
JS控制下拉列表左右选择实例代码
May 08 Javascript
vue 实现根据data中的属性值来设置不同的样式
Aug 04 Javascript
js实现随机点名功能
Dec 23 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 chmod 函数与批量修改文件目录权限
2010/05/10 PHP
PHP调用Webservice实例代码
2011/07/29 PHP
深入理解:单一入口、MVC、ORM、CURD、ActiveRecord概念
2013/06/06 PHP
php上传大文件设置方法
2016/04/14 PHP
php in_array() 检查数组中是否存在某个值详解
2016/11/23 PHP
href下载文件根据id取url并下载
2014/05/28 Javascript
由浅入深讲解Javascript继承机制与simple-inheritance源码分析
2015/12/13 Javascript
实例讲解jquery与json的结合
2016/01/07 Javascript
js 判断附件后缀的简单实现方法
2016/10/11 Javascript
Vue+SpringBoot开发V部落博客管理平台
2017/12/27 Javascript
angular2中Http请求原理与用法详解
2018/01/11 Javascript
Vue中computed与methods的区别详解
2018/03/24 Javascript
详解ES7 Decorator 入门解析
2019/02/18 Javascript
layui的数据表格+springmvc实现搜索功能的例子
2019/09/28 Javascript
js实现页面导航层级指示效果
2020/08/25 Javascript
[46:02]DOTA2上海特级锦标赛D组资格赛#2 Liquid VS VP第二局
2016/02/28 DOTA
Python中实现对Timestamp和Datetime及UTC时间之间的转换
2015/04/08 Python
Python实现返回数组中第i小元素的方法示例
2017/12/04 Python
Python基于递归算法实现的汉诺塔与Fibonacci数列示例
2018/04/18 Python
pyside+pyqt实现鼠标右键菜单功能
2020/12/08 Python
python标准库os库的函数介绍
2020/02/12 Python
win7上tensorflow2.2.0安装成功 引用DLL load failed时找不到指定模块 tensorflow has no attribute xxx 解决方法
2020/05/20 Python
HTML5 Canvas——用路径描画线条实例介绍
2013/06/09 HTML / CSS
设计师大码女装:11 Honoré
2020/05/03 全球购物
大专毕业生简历的自我评价
2013/10/20 职场文书
给朋友的道歉信
2014/01/09 职场文书
《梅兰芳学艺》教学反思
2014/02/24 职场文书
《美丽的彩虹》教学反思
2014/02/25 职场文书
就业协议书范本
2014/04/11 职场文书
安全口号大全
2014/06/21 职场文书
节能环保家庭事迹材料
2014/08/27 职场文书
安全伴我行演讲稿
2014/09/04 职场文书
优秀少先队员事迹材料
2014/12/24 职场文书
生产实习心得体会范文
2016/01/22 职场文书
React如何使用axios请求数据并把数据渲染到组件
2022/08/05 Javascript