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 相关文章推荐
Code:loadScript( )加载js的功能函数
Feb 02 Javascript
JavaScript监测ActiveX控件是否已经安装过的代码
Sep 02 Javascript
JavaScript游戏之是男人就下100层代码打包
Nov 08 Javascript
提交按钮的name='submit'引起的js失效问题及原因
Feb 25 Javascript
举例详解Python中smtplib模块处理电子邮件的使用
Jun 24 Javascript
jQuery通过deferred对象管理ajax异步
May 20 Javascript
Bootstrap复选框和单选按钮美化插件(推荐)
Nov 23 Javascript
使用prop解决一个checkbox选中后再次选中失效的问题
Jul 05 Javascript
深入理解Vue官方文档梳理之全局API
Nov 22 Javascript
vue实现点击当前标签高亮效果【推荐】
Jun 22 Javascript
JS实现的input选择图片本地预览功能示例
Aug 29 Javascript
Python机器学习之决策树和随机森林
Jul 15 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 长文章分页函数 带使用方法,不会分割段落,翻页在底部
2009/10/22 PHP
PHP mongodb操作类定义与用法示例【适合mongodb2.x和mongodb3.x】
2018/06/16 PHP
js数字输入框(包括最大值最小值限制和四舍五入)
2009/11/24 Javascript
javascript string字符串优化问题
2011/07/31 Javascript
JS 实现图片直接下载示例代码
2013/07/22 Javascript
js实现点小图看大图效果的思路及示例代码
2013/10/28 Javascript
JS弹出层的显示与隐藏示例代码
2013/12/27 Javascript
中文输入法不触发onkeyup事件的解决办法
2014/07/09 Javascript
如何用JavaScript定义一个类
2014/09/12 Javascript
使用JavaScript为Kindeditor自定义按钮增加Audio标签
2016/03/18 Javascript
通过正则表达式获取url中参数的简单实现
2016/06/07 Javascript
基于jQuery实现中英文切换导航条效果
2016/09/18 Javascript
你可能不知道的JSON.stringify()详解
2017/08/17 Javascript
Vue.js 的移动端组件库mint-ui实现无限滚动加载更多的方法
2017/12/23 Javascript
Angular4学习之Angular CLI的安装与使用教程
2018/01/04 Javascript
vue组件文档(.md)中如何自动导入示例(.vue)详解
2019/01/25 Javascript
浅析TypeScript 命名空间
2020/03/19 Javascript
全面解析JavaScript Module模式
2020/07/24 Javascript
[06:11]2014DOTA2国际邀请赛 专访团结一心的VG战队
2014/07/21 DOTA
python变量不能以数字打头详解
2016/07/06 Python
Python爬虫PyQuery库基本用法入门教程
2018/08/04 Python
python直接获取API传递回来的参数方法
2018/12/17 Python
python中有关时间日期格式转换问题
2019/12/25 Python
PyQt5 closeEvent关闭事件退出提示框原理解析
2020/01/08 Python
PyQt5实现画布小程序
2020/05/30 Python
python让函数不返回结果的方法
2020/06/22 Python
如何用Python绘制3D柱形图
2020/09/16 Python
html2 canvas生成清晰的图片实现打印功能
2019/09/23 HTML / CSS
年度考核评语
2014/01/19 职场文书
小区门卫管理制度
2014/01/29 职场文书
高一化学教学反思
2014/02/05 职场文书
2014年元旦感言
2014/03/06 职场文书
老人祝寿主持词
2014/03/28 职场文书
服装发布会策划方案
2014/05/22 职场文书
2014年民主评议党员个人总结
2014/09/24 职场文书
纪录片信仰观后感
2015/06/08 职场文书