首页 > 解决方案 > Jquery排序排序列表,使用函数

问题描述

我正在使用这个插件来改变我的选择列表的工作方式。http://odyniec.net/projects/selectlist/

这看起来不错,可以满足我的要求。它可以选择使用您自己的功能应用排序。

自定义排序功能可用于按所需顺序排列所选项目。该函数接受两个参数,它们是与被比较的项目相对应的两个 DOM 元素。如果认为第一项大于第二项,则返回值应为 true,否则为 false。

这是一个排序函数的示例,它通过将两个项目转换为小写的文本来比较这两个项目,从而导致不区分大小写的排序(默认情况下,排序是区分大小写的):

$('select').selectList({
  sort: function (item1, item2) {
    return $(item1).text().toLowerCase() > $(item2).text().toLowerCase();
  }
});

我的选择列表显示为:

value= 0    text= 0
value= 1    text= 1
value= 2    text= 2
value= 3    text= 3
value= 4    text= 4
value= 5    text= 5
value= at   text= @
value= dollar    text= $
value= school    text= School
value= location  text= Location

当通过选择列表选择并显示选项时,它们不会按此顺序显示,因此我想利用使用自定义函数进行排序的能力,如上所示。

基本上它应该是正确顺序的任何数字,从 0 开始,然后是 @、$,然后是底部的学校和位置。

关于如何创建函数来做到这一点的任何想法?

标签: jquerysorting

解决方案


数字和字符串排序的基本思想是

sort: function (item1, item2) {
  const aText = $(item1).text().toLowerCase()
  const bText = $(item2).text().toLowerCase()
  const aNum = Number(aText)
  const bNum = Number(bText)
  if (!isNaN(nA) && isNaN(nB)){
    return -1
  } else if (isNaN(aNum) && !isNaN(bNum)){
    return 1
  } else if (!isNaN(aNum) && !isNaN(bNum)) {
    return  aNum > bNum ? 1 : -1
  }
  return aText.localeCompare(bText)
}

与此有关的是,位置和学校将按 alpha 顺序排列,而不是颠倒过来。如果它必须按照其他顺序,它仍然需要更多的逻辑。


推荐阅读