jQuery：如何根据数值对列表文本进行排序

Question

我正在使用以下脚本 (jQuery 2.1.1) 对包含文本和数值的列表进行排序。 理论上，排序有效是因为在“iPhone 11”和“iPhone 6”之间，“iPhone 1”排在“iPhone 6”之前，但在现实世界中这没有意义，因为 6<11 和“iPhone 6”<“iPhone 11” ”。

$('ul').children("li").sort(function(a, b) {
var A = $(a).text().toUpperCase();
var B = $(b).text().toUpperCase();
return (A < B) ? -1 : (A > B) ? 1 : 0;
}).appendTo('ul');

应该如何排序：

iPhone 6
iPhone 8
iPhone 11
iPhone 12
samsung galaxy s8
samsung galaxy s10
samsung galaxy s20

什么排序返回：

iPhone 11
iPhone 12
iPhone 6
iPhone 8
samsung galaxy s10
samsung galaxy s20
samsung galaxy s8

最好的方法是什么？ 我正在考虑剥离所有文本并根据剩下的整数进行排序，但如果我这样做，在当前列表中将使“银河”模型出现在“iphone”模型之间（这也没有意义），如下所示：

iPhone 6
iPhone 8
samsung galaxy s8
samsung galaxy s10
iPhone 11
iPhone 12
samsung galaxy s20

Answer 1

由于您必须对包含数字的文本进行排序，因此请执行以下操作：

return A.localeCompare(B, false, {
  numeric: true
})

您可以在此处找到有关 localCompare 和选项的更多信息

所以你的代码看起来像：

$('ul').children("li").sort(function(a, b) {
  var A = $(a).text().toUpperCase();
  var B = $(b).text().toUpperCase();
  return A.localeCompare(B, false, {
    numeric: true
  })
}).appendTo('ul');

演示

 $('ul').children("li").sort(function(a, b) { var A = $(a).text().toUpperCase(); var B = $(b).text().toUpperCase(); return A.localeCompare(B, false, { numeric: true }) }).appendTo('ul');

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul> <li>iPhone 6</li> <li>iPhone 8</li> <li>samsung galaxy s8</li> <li>samsung galaxy s10</li> <li>iPhone 11</li> <li>iPhone 12</li> <li>samsung galaxy s20</li> </ul>