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 相关文章推荐
动态创建script标签实现跨域资源访问的方法介绍
Feb 28 Javascript
JavaScript判断undefined类型的正确方法
Jun 30 Javascript
兼容各大浏览器的JavaScript阻止事件冒泡代码
Jul 09 Javascript
jQuery获取与设置iframe高度的方法
Aug 01 Javascript
javascript另类方法实现htmlencode()与htmldecode()函数实例分析
Nov 17 Javascript
微信小程序 Tab页切换更新数据
Jan 05 Javascript
基于Bootstrap分页的实例讲解(必看篇)
Jul 04 Javascript
js+html5实现侧滑页面效果
Jul 15 Javascript
ztree简介_动力节点Java学院整理
Jul 19 Javascript
angular+ionic返回上一页并刷新页面
Aug 08 Javascript
在vue中实现简单页面逆传值的方法
Nov 27 Javascript
快速解决Vue、element-ui的resetFields()方法重置表单无效的问题
Aug 12 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
基于mysql的论坛(4)
2006/10/09 PHP
PHP新手上路(十四)
2006/10/09 PHP
PHP中使用TCPDF生成PDF文档实例
2014/07/01 PHP
PHP实现简单ajax Loading加载功能示例
2016/12/28 PHP
php批量删除操作代码分享
2017/02/26 PHP
PHP时间日期增减操作示例【date strtotime实现加一天、加一月等操作】
2018/12/21 PHP
thinkphp框架表单数组实现图片批量上传功能示例
2020/04/04 PHP
自动生成文章摘要的代码[JavaScript 版本]
2007/03/20 Javascript
DOM和XMLHttpRequest对象的属性和方法整理
2012/01/04 Javascript
javascript学习笔记(十六) 系统对话框(alert、confirm、prompt)
2012/06/20 Javascript
基于jquery的文章中所有图片width大小批量设置方法
2013/08/01 Javascript
jquery属性选择器not has怎么写 行悬停高亮显示
2013/11/13 Javascript
用jquery修复在iframe下的页面锚点失效问题
2014/08/22 Javascript
Node.js与Sails ~项目结构与Mvc实现及日志机制
2015/10/14 Javascript
jQuery实现点击水纹波动动画
2016/04/10 Javascript
浅谈jquery页面初始化的4种方式
2016/11/27 Javascript
Jquery Easyui搜索框组件SearchBox使用详解(19)
2016/12/17 Javascript
js调用刷新界面的几种方式
2017/05/03 Javascript
vue+Element-ui实现分页效果实例代码详解
2018/12/10 Javascript
如何在vue里面优雅的解决跨域(路由冲突问题)
2019/01/20 Javascript
详解Python中for循环的使用方法
2015/05/14 Python
win10系统中安装scrapy-1.1
2016/07/03 Python
Flask模拟实现CSRF攻击的方法
2018/07/24 Python
python3中os.path模块下常用的用法总结【推荐】
2018/09/16 Python
30秒学会30个超实用Python代码片段【收藏版】
2019/10/15 Python
python实现在多维数组中挑选符合条件的全部元素
2019/11/26 Python
英国最大的割草机购买网站:Just Lawnmowers
2019/11/02 全球购物
职工运动会邀请函
2014/02/02 职场文书
如何写好自荐信
2014/04/07 职场文书
企业文明单位申报材料
2014/05/16 职场文书
公务员党员评议表自我鉴定
2014/09/14 职场文书
转让协议书
2015/01/27 职场文书
发票退票证明
2015/06/24 职场文书
详解MindSpore自定义模型损失函数
2021/06/30 Python
Mysql数据库中datetime、bigint、timestamp来表示时间选择,谁来存储时间效率最高
2021/08/23 MySQL
AJAX实现指定部分页面刷新效果
2021/10/16 Javascript