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 相关文章推荐
在一个浏览器里呈现所有浏览器测试结果的前端测试工具的思路
Mar 02 Javascript
Javascript学习笔记二 之 变量
Dec 15 Javascript
复制js对象方法(详解)
Jul 08 Javascript
基于Jquery+Ajax+Json实现分页显示附效果图
Jul 30 Javascript
Vuex之理解Mutations的用法实例
Apr 19 Javascript
Vue 2.0中生命周期与钩子函数的一些理解
May 09 Javascript
详解axios在vue中的简单配置与使用
May 10 Javascript
angularjs 的数据绑定实现原理
Jul 02 Javascript
angularjs使用div模拟textarea文本框的方法
Oct 02 Javascript
微信小程序CSS3动画下拉菜单效果
Nov 04 Javascript
vue实现的多页面项目如何优化打包的步骤详解
Jul 19 Javascript
JavaScript 声明私有变量的两种方式
Feb 05 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生成带有雪花背景的验证码
2008/09/28 PHP
php获取当前网址url并替换参数或网址的方法
2010/06/06 PHP
将时间以距今多久的形式表示,PHP,js双版本
2012/09/25 PHP
ASP.NET jQuery 实例18 通过使用jQuery validation插件校验DropDownList
2012/02/03 Javascript
jquery选择checked在ie8普通模式下的问题
2014/02/12 Javascript
jQuery对下拉框,单选框,多选框的操作
2014/02/21 Javascript
jquery实现显示已选用户
2014/07/21 Javascript
jquery实现Li滚动时滚动条自动添加样式的方法
2015/08/10 Javascript
js阻止冒泡和默认事件(默认行为)详解
2016/10/20 Javascript
微信小程序 动态绑定数据及动态事件处理
2017/03/14 Javascript
easyui简介_动力节点Java学院整理
2017/07/14 Javascript
vue+jquery+lodash实现滑动时顶部悬浮固定效果
2018/04/28 jQuery
Vue3 源码导读(推荐)
2019/10/14 Javascript
微信小程序 SOTER 生物认证DEMO 指纹识别功能
2019/12/13 Javascript
js实现鼠标拖拽div左右滑动
2020/01/15 Javascript
[48:45]Ti4 循环赛第二日 NEWBEE vs EG
2014/07/11 DOTA
[45:17]DOTA2-DPC中国联赛定级赛 Phoenix vs DLG BO3第三场 1月9日
2021/03/11 DOTA
Django 导出 Excel 代码的实例详解
2017/08/11 Python
python批量修改文件编码格式的方法
2018/05/31 Python
解决django前后端分离csrf验证的问题
2019/02/03 Python
python+os根据文件名自动生成文本
2019/03/21 Python
Python搭建代理IP池实现检测IP的方法
2019/10/27 Python
Django choices下拉列表绑定实例
2020/03/13 Python
对django 2.x版本中models.ForeignKey()外键说明介绍
2020/03/30 Python
CSS3弹性盒模型开发笔记(三)
2016/04/26 HTML / CSS
澳大利亚儿童鞋在线:The Trybe
2019/07/16 全球购物
求职自荐信范文格式
2013/11/29 职场文书
党章学习思想汇报
2014/01/14 职场文书
乡镇党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
社会治安综合治理责任书
2015/01/29 职场文书
工作迟到检讨书范文
2015/05/06 职场文书
教师工作证明范本
2015/06/12 职场文书
使用pycharm运行flask应用程序的详细教程
2021/06/07 Python
VUE中的v-if与v-show区别介绍
2022/03/13 Vue.js
详解Python flask的前后端交互
2022/03/31 Python
解决MySQL报“too many connections“错误
2022/04/19 MySQL