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>