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 判断日期格式是否正确的实现代码
Jul 04 Javascript
6款经典实用的jQuery小插件及源码(对话框/提示工具等等)
Feb 04 Javascript
jQuery EasyUI tree 使用拖拽时遇到的错误小结
Oct 10 Javascript
Bootstrap中data-target 到底是什么
Feb 14 Javascript
Angular 4依赖注入学习教程之组件服务注入(二)
Jun 04 Javascript
node.js多个异步过程中判断执行是否完成的解决方案
Dec 10 Javascript
浅析vue中常见循环遍历指令的使用 v-for
Apr 18 Javascript
为什么使用koa2搭建微信第三方公众平台的原因
May 16 Javascript
webpack4+Vue搭建自己的Vue-cli项目过程分享
Aug 29 Javascript
jQuery实现文本显示一段时间后隐藏的方法分析
Jun 20 jQuery
vue中的双向数据绑定原理与常见操作技巧详解
Mar 16 Javascript
jQuery实现飞机大战小游戏
Jul 05 jQuery
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
smarty基础之拼接字符串的详解
2013/06/18 PHP
一个显示效果非常不错的PHP错误、异常处理类
2014/03/21 PHP
php+Mysqli利用事务处理转账问题实例
2015/02/11 PHP
兼容Firefox的Javascript XSLT 处理XML文件
2014/12/31 Javascript
JS组件Bootstrap Table表格行拖拽效果实现代码
2020/08/27 Javascript
Javascript iframe交互并兼容各种浏览器的解决方法
2016/07/12 Javascript
详解js运算符单竖杠“|”与“||”的用法和作用介绍
2016/11/04 Javascript
通过jsonp获取json数据实现AJAX跨域请求
2017/01/22 Javascript
原生javascript实现文件异步上传的实例讲解
2017/10/26 Javascript
将Sublime Text 3 添加到右键中的简单方法
2017/12/12 Javascript
Element中的Cascader(级联列表)动态加载省\市\区数据的方法
2019/03/27 Javascript
说说如何利用 Node.js 代理解决跨域问题
2019/04/22 Javascript
js变量值传到php过程详解 将php解析成数据
2019/06/26 Javascript
jQuery实现简单全选框
2020/09/13 jQuery
[01:21:07]EG vs Liquid 2018国际邀请赛淘汰赛BO3 第一场 8.25
2018/08/29 DOTA
Python实现比较两个列表(list)范围
2015/06/12 Python
python读写json文件的简单实现
2017/04/11 Python
对python中矩阵相加函数sum()的使用详解
2019/01/28 Python
Python3使用Matplotlib 绘制精美的数学函数图形
2019/04/11 Python
详解Python 函数如何重载?
2019/04/23 Python
从列表或字典创建Pandas的DataFrame对象的方法
2019/07/06 Python
python 含子图的gif生成时内存溢出的方法
2019/07/07 Python
深入浅析python的第三方库pandas
2020/02/13 Python
Selenium 安装和简单使用的实现
2020/12/04 Python
css3图片边框border-image的用法
2017/06/30 HTML / CSS
浅谈Html5移动端ios/Android兼容性总结
2018/06/01 HTML / CSS
荟萃全球保健品:维他购
2018/05/09 全球购物
千禧酒店及度假村官方网站:Millennium Hotels and Resorts
2019/05/10 全球购物
百日安全活动总结
2014/05/04 职场文书
毕业设计说明书
2014/05/07 职场文书
大学生就业求职信
2014/06/12 职场文书
学生自我鉴定格式及范文
2014/09/16 职场文书
关于安全的广播稿
2014/10/23 职场文书
2015年教研室工作总结范文
2015/05/23 职场文书
图片批量处理 - 尺寸、格式、水印等
2022/03/07 杂记
bose降噪耳机音能消除人声吗
2022/04/19 数码科技