js实现列表按字母排序

2024-10-22 14:41:41

本文实例为大家分享了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 select列表内容按字母倒序排序与按列表倒序排列

今天51js上有网友贴出了这个问题,原本以为是把内容按字母顺序倒序排列,因为以前看过一篇正序排列的文章,偶就想倒序也应该不难,查看了下资料便很快搞定了问题. 无忧脚本代码测试网页 b e c f a function st(a,b){ if(a>b) return -1; else if(a0){ t1[t1.length]=tt[0].text; t2[t2.length]=tt[0].value; tt.remove(0); } t1.sort(st); for(var i=0,c1,c2;
js实现列表按字母排序

本文实例为大家分享了js实现列表按字母排序的具体代码,供大家参考,具体内容如下知识点 1.parentNode:返回元素父节点的属性 2.insertBefore()方法 insertBefore() 方法可在已有的子节点前插入一个新的子节点. 语法:node.insertBefore(newnode,existingnode) newnode 节点对象必须.要插入的节点对象 existingnode 节点对象必须.要添加新的节点前的子节点. <!DOCTYPE html> <ht
js实现表格单列按字母排序

本文实例为大家分享了js实现表格单列按字母排序的具体代码,供大家参考,具体内容如下类似于列表按字母排序,直接上代码啦~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格单列字母排序</title> <link href="../css/表格数据搜索.css" rel=&qu
Mint UI实现A-Z字母排序的城市选择列表

本文实例为大家分享了Mint Ul实现A-Z字母排序的城市选择列表的具体代码,供大家参考,具体内容如下效果图如下: 项目文件存放路径图: pinying.js 和 city.json文件下载传送门所有代码如下: <template> <mt-index-list> <mt-index-section v-for="letter in citySortArr" :key="letter" :index="letter&quo
vue实现歌手列表字母排序下拉滚动条侧栏排序实时更新

今天写项目的时候遇到了歌手排序的问题,联想到了我们平时的手机通讯录侧栏字母排序,按照ABCDE这样的顺序对名字进行排序. 我们先来看看效果那就用vue来实现一遍首先新建一个vue页面,取名为helloworld.vue 在页面里写入内容 <template> <div class="hello"> <div class="singer" id="singer"> <div class="si
angular.js实现列表orderby排序的方法

如下所示: <html ng-app> <head> <title>order by</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width,initial-scale=1" /> &l
Vue中使用elementui与Sortable.js实现列表拖动排序

本文实例为大家分享了使用elementui与Sortable.js实现列表拖动排序的具体代码,供大家参考,具体内容如下一.安装使用Sortable.js 1.安装 cnpm install sortablejs --save 2.在需要的vue页面单独引入 <script> import Sortable from 'sortablejs' export default{ ......... data() { retur
JS实现table表格数据排序功能(可支持动态数据+分页效果)

asp.net会经常遇到分页的效果,尤其是希望实现静态的html分页排序(html分页相信大家都已经有自己的解决方案.在这里就不多说).我写了一个简单的Demo排序. 数据就是字母和数字两组.(汉字需要找到asc码) 原理就是利用数组自带的sort排序,进行表格重组.已在.net mvc 中测试过.支持分页.(申明一点.只对当前页面数据排序无刷新,对所有页面排序的话,肯定需要刷新.这点我还在解决中.)希望有新想法的高手们,给下指点. 下面把html的代码贴出来: <!DOCTYPE HTML
Python判断列表是否已排序的各种方法及其性能分析

声明本文基于Python2.7语言,给出判断列表是否已排序的多种方法,并在作者的Windows XP主机(Pentium G630 2.7GHz主频2GB内存)上对比和分析其性能表现. 一. 问题提出 Haskell培训老师提出一个问题:如何判断列表是否已经排序? 排序与否实际只是相邻元素间的某种二元关系,即a->a->Bool.所以第一步可以把二元组列表找出来:第二步是把这个函数作用于每个元组,然后用and操作.老师给出的实现代码如下: pair lst = zip lst ( tail
js中判断数字\字母\中文的正则表达式 (实例)

/* 判断指定的内容是否为空,若为空则弹出警告框 */ function isEmpty(theValue, strMsg){ if(theValue==""){ alert(strMsg+"不能为空!"); return true; } return false; } /* 中文判断函数,允许生僻字用英文"*"代替返回true表示是符合条件,返回false表示不符合 */ function isChinese(str){ var badCh
Android仿微信联系人按字母排序

App只要涉及到联系人的界面,几乎都是按照字母排序以及导航栏的方式.既然这个需求这么火,于是开始学习相关内容,此篇文章是我通过参考网上资料独立编写和总结的,希望多多少少对大家有所帮助,写的不好,还请各位朋友指教. 效果图如下: 实现这个效果,需要三个知识点 : 1:将字符串进行拼音分类 2:ExpandableListView 二级扩展列表 3:右边字母分类View 我们先一个一个来了解解决方案,再上代码. 实现字母分类: 字母分类又分为三个小要点:一个是将中文转化为拼音,一个是实现按照字母的

js实现列表按字母排序

相关推荐

随机推荐