利用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字符串,并接受两个参数:索引参数(该参数是此集合中对象的索引)和html参数(原始html值)。
2.JavaScript函数介绍
JavaScript函数sort ()--对元素进行排序以对数组元素进行排序。 语法形式如下。
阵列对象. sort ([ sort by ] )。
注意: sortby是可选的,定义数组顺序,并且必须是函数。 返回值就是排序后的数组本身。 如果在不使用参数的情况下调用方法,则会按字母顺序对数组中的元素进行排序。 更准确地说,是按照字符编码的顺序排序。 要实现这一点,必须首先将数组的所有元素转换为字符串,然后根据需要进行比较。
要按其他标准排序,必须提供比较函数来比较两个值并返回说明这两个值的相对顺序的数值。 比较函数必须有两个参数a和b。 返回值如下。 如果a小于b,则如果排序数组中a必须位于b之前,则返回小于0的值。 如果a等于b,则返回0。 如果a大于b,则返回大于0的值。
3 .实现功能
要实现无序列表项的排序功能,请执行下列操作:
)1)获取所有列表项目,并编入数组。
)2)对数组对象进行排序。
)3)将排序后的数组重新填充到无序列表中。
首先,引入jQuery库。
然后,添加完整的代码。
$ (document.ready (function ) )。
varitems=$('.orderobjLi ' ).get ); //获取要排序的所有li加载数组items
items.sort(function(a,b )调用JavaScript内置函数sort
{
varelementone=$(a ).text );
varelementtwo=$(b ).text );
元素元素元素返回- 1;
元素元素元素返回1;
返回0;
);
var ul=$('.orderobj ' );
$.each(items,function(i ) (I,li ) ) )。
//遍历每个数组元素以填充无序列表
{
ul.append(Li;
);
);
以上代码按数组排序,并重新输入到无序列表中,使列表项变得有序。
具体效果如图4.11所示。
以上是使用jQuery对无序列表进行排序的简单方法的全部内容。 希望你支持编剧~