DDR爱好者之家

利用jQuery对无序列表排序的简单方法
站长资源 2024/11/28 佚名
51 1538
DDR爱好者之家 Design By 杰米

利用jQuery对无序列表排序的原理是：获取到无序列表中的所有列表项，并转成数组形式，使用JavaScript函数对其进行排序后再次输出。其中使用到的jQuery函数有ready()、get()、text()、each()、append()和JavaScript函数sort()。

1．jQuery函数介绍

（1）jQuery函数get()--获取匹配元素集合

该函数取得所有匹配元素的一种向后兼容的方式（不同于jQuery对象，实际上是元素数组）。其语法形式如下：

object.get()

注：如果你想要直接操作DOM对象而不是jQuery对象，这个函数非常有用。

（2）jQuery函数text()--获取和设置元素内容

该函数获取和设置匹配元素的文本内容。其语法形式如下：

object.text([val|fn])

注：val和fn参数可选。val是设置元素的文本内容值；fn(index,text)函数返回一个字符串，接受两个参数，index为元素在集合中的索引位置，text为原先的text值。

（3）jQuery函数append()--向元素追加内容

该函数向每个匹配的元素内部追加内容。其语法形式如下：

object.append(content|fn)

注：这个操作与对指定的元素执行appendChild方法并将它们添加到文档中的情况类似。content参数表示追加的内容；fn(index,html)返回一个HTML字符串，用于追加到每一个匹配元素内部，接受两个参数，index参数为对象在这个集合中的索引值，html参数为这个对象原先的html值。

2．JavaScript函数介绍

JavaScript函数sort()--元素排序，用于对数组元素进行排序。其语法形式如下：

arrayObject.sort([sortby])

注：sortby可选，规定排列顺序，必须是函数。返回值为排序后的数组本身。如果调用该方法时没有使用参数，将按字母顺序对数组中的元素进行排序。说得更精确点，是按照字符编码的顺序进行排序。要实现这一点，首先应把数组的元素都转换成字符串（如有必要），以便进行比较。

如果想按照其他标准进行排序，就需要提供比较函数，该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数a和b，其返回值如下：若a小于b，在排序后的数组中a应该出现在b之前，则返回一个小于0的值。若a等于b，则返回0。若a大于b，则返回一个大于0的值。

3．功能实现

实现无序列表项排序功能的步骤如下。

（1）获取所有的列表项，并将其装入数组。

（2）对数组对象进行排序。

（3）将排好序的数组重新填充到无序列表中。

首先，把jQuery库引入进来：

<script language="JavaScript" src="/UploadFiles/2021-04-02/jquery-1.6.js">


然后，添加完整代码：





 <script language="JavaScript" type="text/JavaScript"> 
 $(document).ready(function(){ 
  var items = $(".orderobj li").get();  //获取所有待排序li装入数组items 
  items.sort(function(a,b)        //调用JavaScript内置函数sort 
  { 
    var elementone = $(a).text(); 
    var elementtwo = $(b).text(); 
    if(elementone < elementtwo) return -1;  
    if(elementone > elementtwo) return 1; 
   return 0; 
 }); 
 
 var ul = $(".orderobj"); 
 $.each(items,function(i,li)    
        //通过遍历每一个数组元素，填充无序列表 
 { 
   ul.append(li); 
 }); 
 }); 
 </script> 





以上代码通过数组排序并重新填充无序列表使得列表项有序。


利用jQuery对无序列表排序的简单方法 


具体效果如图4.11所示。


以上就是小编为大家带来的利用jQuery对无序列表排序的简单方法全部内容了，希望大家多多支持~
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站 透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码 爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？

根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米