| 标题 | jQuery实现对无序列表的排序功能 |
| 内容 | 本文实例讲述了jQuery实现对无序列表的排序功能。分享给大家供大家参考，具体如下： 利用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="jquery-1.7.2.min.js"></script> 然后，添加如下排序功能代码： <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程序设计有所帮助。 |
| 随便看 |
|
在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。