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 相关文章推荐
js中判断用户输入的值是否为空的简单实例
Dec 23 Javascript
jquery动态分页效果堪比时光网
Sep 25 Javascript
JavaScript拆分字符串时产生空字符的解决方案
Sep 26 Javascript
js实现时间显示几天前、几小时前或者几分钟前的方法集锦
May 29 Javascript
使用jQuery在移动页面上添加按钮和给按钮添加图标
Dec 04 Javascript
Bootstrap导航条的使用和理解3
Dec 14 Javascript
微信小程序实现图片轮播及文件上传
Apr 07 Javascript
angularjs实现天气预报功能
Jun 16 Javascript
vue.js响应式原理解析与实现
Jun 22 Javascript
vue基础之模板和过滤器用法实例分析
Mar 12 Javascript
vuejs移动端实现div拖拽移动
Jul 25 Javascript
vue中获取滚动table的可视页面宽度调整表头与列对齐(每列宽度不都相同)
Aug 17 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 strtotime函数详解
2009/12/18 PHP
PHP Memcached应用实现代码
2010/02/08 PHP
分享一个PHP数据流应用的简单例子
2012/06/01 PHP
typecho插件编写教程(四):插件挂载
2015/05/28 PHP
用showModalDialog弹出页面后,提交表单总是弹出一个新窗口
2009/07/18 Javascript
js 获取服务器控件值的代码
2010/03/05 Javascript
拥抱模块化的JavaScript
2012/03/07 Javascript
jQuery的attr与prop使用介绍
2013/10/10 Javascript
使用JS取得焦点(focus)元素代码
2014/03/22 Javascript
JQuery中ajax方法访问web服务实例
2015/07/18 Javascript
JavaScript中对JSON对象的基本操作示例
2016/05/21 Javascript
基于Bootstrap实现下拉菜单项和表单导航条(两个菜单项,一个下拉菜单和登录表单导航条)
2016/07/22 Javascript
浅析webpack 如何优雅的使用tree-shaking(摇树优化)
2017/08/16 Javascript
Vue项目中使用WebUploader实现文件上传的方法
2019/07/21 Javascript
jQuery实现王者荣耀手风琴效果
2020/01/17 jQuery
微信jssdk踩坑之签名错误invalid signature
2020/05/19 Javascript
javascript实现拼图游戏
2021/01/29 Javascript
[03:23]我的刀塔你不可能这么可爱 第一期金萌萌的故事
2014/06/20 DOTA
400多行Python代码实现了一个FTP服务器
2012/05/10 Python
在Python中操作文件之seek()方法的使用教程
2015/05/24 Python
Python中map和列表推导效率比较实例分析
2015/06/17 Python
Python3如何解决字符编码问题详解
2017/04/23 Python
PyQt5显示GIF图片的方法
2019/06/17 Python
django 配置阿里云OSS存储media文件的例子
2019/08/20 Python
tensorflow ckpt模型和pb模型获取节点名称,及ckpt转pb模型实例
2020/01/21 Python
Python如何定义有可选参数的元类
2020/07/31 Python
韩国著名的在线综合购物网站:Akmall
2016/08/07 全球购物
Craghoppers德国官网:户外和旅行服装
2020/02/14 全球购物
男女钓鱼靴和甲板鞋:XTRATUF
2021/01/09 全球购物
西班牙在线光学:Visual-Click
2020/06/22 全球购物
如何写出好的Java代码
2014/04/25 面试题
医院办公室主任职责
2013/12/29 职场文书
五年级音乐教学反思
2014/02/06 职场文书
小学安全工作总结2015
2015/05/18 职场文书
初中班主任心得体会
2016/01/07 职场文书
Python Django / Flask如何使用Elasticsearch
2022/04/19 Python