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控制iframe滚动的代码
Apr 10 Javascript
js 获取(接收)地址栏参数值的方法
Apr 01 Javascript
jquery实现两个图片渐变切换效果的方法
Jun 25 Javascript
jQuery编程中的一些核心方法简介
Aug 14 Javascript
如何解决谷歌浏览器下jquery无法获取图片的尺寸
Sep 10 Javascript
js调用webservice构造SOAP进行身份验证
Apr 27 Javascript
Bootstrap Table从零开始
Jun 30 Javascript
js实现导航跟随效果
Nov 17 Javascript
微信小程序实现商城倒计时
Nov 01 Javascript
javascript实现简易的计算器
Jan 17 Javascript
如何编写一个 Webpack Loader的实现
Oct 18 Javascript
Electron+vue从零开始打造一个本地播放器的方法示例
Oct 27 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
ftp类(example.php)
2006/10/09 PHP
给apache2.2加上mod_encoding模块後 php5.2.0 处理url出现bug
2007/04/12 PHP
yii使用bootstrap分页样式的实例
2017/01/17 PHP
详解Yii2.0 rules验证规则集合
2017/03/21 PHP
php使用fputcsv实现大数据的导出操作详解
2020/02/27 PHP
jquery插件 cluetip 关键词注释
2010/01/12 Javascript
鼠标滑在标题上显示图片的JS代码
2013/11/19 Javascript
一个css与js结合的下拉菜单支持主流浏览器
2014/10/08 Javascript
在JS方法中返回多个值的方法汇总
2015/05/20 Javascript
Webpack 实现 Node.js 代码热替换
2015/10/22 Javascript
JavaScript+html5 canvas制作的百花齐放效果完整实例
2016/01/26 Javascript
Bootstrap 3的box-sizing样式导致UEditor控件的图片无法正常缩放的解决方案
2016/09/15 Javascript
AngularJS ng-template寄宿方式用法分析
2016/11/07 Javascript
Bootstrap modal 多弹窗之叠加关闭阴影遮罩问题的解决方法
2017/02/27 Javascript
AngularJS的$location使用方法详解
2017/10/19 Javascript
mui上拉加载更多下拉刷新数据的封装过程
2017/11/03 Javascript
angular动态表单制作
2018/02/23 Javascript
vue+element-ui+ajax实现一个表格的实例
2018/03/09 Javascript
深入理解JS的事件绑定、事件流模型
2018/05/13 Javascript
layui问题之模拟select点击事件的实例讲解
2018/08/15 Javascript
JavaScript中的一些实用小技巧总结
2019/04/07 Javascript
layui2.0使用table+laypage实现真分页
2019/07/27 Javascript
使用js实现一个简单的滚动条过程解析
2019/09/10 Javascript
手把手教您实现react异步加载高阶组件
2020/04/07 Javascript
详解python的ORM中Pony用法
2018/02/09 Python
python 爬虫一键爬取 淘宝天猫宝贝页面主图颜色图和详情图的教程
2018/05/22 Python
python利用openpyxl拆分多个工作表的工作簿的方法
2019/09/27 Python
使用opencv识别图像红色区域,并输出红色区域中心点坐标
2020/06/02 Python
详解Anaconda 的安装教程
2020/09/23 Python
Python中全局变量和局部变量的理解与区别
2021/02/07 Python
秘鲁购物网站:Linio秘鲁
2017/04/07 全球购物
中文专业毕业生自荐信
2013/10/28 职场文书
四群教育工作实施方案
2014/03/26 职场文书
大学中国梦演讲稿
2014/04/23 职场文书
《思路决定出路》读后感3篇
2019/12/11 职场文书
如何使用Maxwell实时同步mysql数据
2021/04/08 MySQL