Question

我有一个ul，我正在尝试使用javascript（或jQuery，如果更容易或必要）排序：

<ul>
  <li>1 - 5 days</li>
  <li>11 - 15 days</li>
  <li>16 - 20 days</li>
  <li>6 days - 10 days</li>
</ul>

我希望的顺序是：1 - 5天，6天 - 10天，11 - 15天，16 - 20天。

现在，我总是可以更改单个数字的项目，以便1 - 5是01 - 05，但从美学角度来说，我希望能够解决这个问题！

我已经尝试了What is the easiest way to order a <UL>/<OL> in jQuery?中描述的过程，但它不适用于我将多个数字与文本混合的情况。

如果它有助于作为起点：http://jsfiddle.net/5gHet/

非常感谢！真的很感激任何想法。

Answer 1

使用parseInt将字符串转换为显示的第一个数字。

items.sort(function(a,b){
  var keyA = parseInt($(a).text(), 10);
  var keyB = parseInt($(b).text(), 10);

  if (keyA < keyB) return -1;
  if (keyA > keyB) return 1;
  return 0;
});

仅供参考，如果在第一个号码之前有非数字/空白字符，parseInt()将返回NaN，那么您需要手动提取该号码。

Answer 2

在空格上拆分字符串，然后获取第一个数字。

var items = $('ul li').get();
items.sort(function(a,b){
  var strA = $(a).text().split(' ');
  var strB = $(b).text().split(' ');

  if (parseInt(strA[0]) < parseInt(strB[0])) return -1;
  if (parseInt(strA[0]) > parseInt(strB[0])) return 1;
  return 0;
});
var ul = $('ul');
$.each(items, function(i, li){
  ul.append(li);
});

演示于：http://jsfiddle.net/5gHet/1/

Answer 3

Fiddle

除了parseInt，你还可以做一点正则表达式：

var $items = $('ul li');
var regex_first_num = /(\d+)/;

$items.sort(function(a,b){
  var keyA = $(a).text().match(regex_first_num)[0] *1;
  var keyB = $(b).text().match(regex_first_num)[0] *1;
  return keyA > keyB;
});

$('#newlist').append($items.clone());

Javascript排序多位数字

3 个答案:

Fiddle