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 相关文章推荐
jQuery Ajax请求状态管理器打包
May 03 Javascript
js获取php变量的实现代码
Aug 10 Javascript
使用CamanJS在Web页面上处理图像的技巧
Aug 18 Javascript
JS实现的页面自定义滚动条效果
Oct 26 Javascript
JS实现的系统调色板完整实例
Dec 21 Javascript
AngularJs 利用百度地图API 定位当前位置 获取地址信息
Jan 18 Javascript
jquery tmpl模板(实例讲解)
Sep 02 jQuery
Angular 4.0学习教程之架构详解
Sep 12 Javascript
关于jquery layui弹出层的使用方法
Apr 21 jQuery
vue实现简单的星级评分组件源码
Nov 16 Javascript
微信小程序新手教程之启动页的重要性
Mar 03 Javascript
js实现带积分弹球小游戏
Jul 21 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与XML的PDF文档生成技术
2006/10/09 PHP
php循环输出数据库内容的代码
2008/05/24 PHP
用PHP将网址字符串转换成超链接(网址或email)
2010/05/25 PHP
php根据年月获取季度的方法
2014/03/31 PHP
关于php支持分块与断点续传文件下载功能代码
2014/05/09 PHP
CI框架中通过hook的方式实现简单的权限控制
2015/01/07 PHP
在Windows XP下安装Apache+MySQL+PHP环境
2015/02/22 PHP
微信支付开发维权通知实例
2016/07/12 PHP
PHP7新特性foreach 修改示例介绍
2016/08/26 PHP
Yii框架中使用PHPExcel的方法分析
2019/07/25 PHP
PHP 图片处理
2020/09/16 PHP
prototype 1.5相关知识及他人笔记
2006/12/16 Javascript
JS字符串函数扩展代码
2011/09/13 Javascript
js清除input中type等于file的值域(示例代码)
2013/12/24 Javascript
js操作IE浏览器弹出浏览文件夹可以返回目录路径
2014/07/14 Javascript
node.js中的fs.appendFile方法使用说明
2014/12/17 Javascript
JavaScript设计模式之装饰者模式介绍
2014/12/28 Javascript
浅谈angular.js中实现双向绑定的方法$watch $digest $apply
2015/10/14 Javascript
Javascript将双字节字符转换成单字节字符并计算长度
2016/06/22 Javascript
购物车前端开发(jQuery和bootstrap3)
2016/08/27 Javascript
JS调用某段SQL语句的方法
2016/10/20 Javascript
JavaScript高仿支付宝倒计时页面及代码实现
2016/10/21 Javascript
Vue中的v-cloak使用解读
2017/03/27 Javascript
jquery实现图片轮播器
2017/05/23 jQuery
小程序实现订单倒计时功能
2019/04/23 Javascript
Vue基于localStorage存储信息代码实例
2020/11/16 Javascript
Python下使用Psyco模块优化运行速度
2015/04/05 Python
详细整理python 字符串(str)与列表(list)以及数组(array)之间的转换方法
2019/08/30 Python
Python的互斥锁与信号量详解
2019/09/12 Python
Python *args和**kwargs用法实例解析
2020/03/02 Python
解决jupyter notebook import error但是命令提示符import正常的问题
2020/04/15 Python
新版Pycharm中Matplotlib不会弹出独立的显示窗口的问题
2020/06/02 Python
Python如何实现远程方法调用
2020/08/07 Python
canvas实现烟花的示例代码
2020/01/16 HTML / CSS
房屋租赁意向书
2014/04/01 职场文书
vue项目两种方式实现竖向表格的思路分析
2021/04/28 Vue.js