Estoy usando el siguiente script (jQuery 2.1.1) para ordenar una lista con texto y valores numéricos. En teoría, la clasificación funciona porque entre "iPhone 11" y "iPhone 6", "iPhone 1" viene antes que "iPhone 6", pero en el mundo real eso no tiene sentido porque 6<11 y "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');Cómo debe ser la clasificación:
iPhone 6 iPhone 8 iPhone 11 iPhone 12 samsung galaxy s8 samsung galaxy s10 samsung galaxy s20qué clasificación devuelve:
iPhone 11 iPhone 12 iPhone 6 iPhone 8 samsung galaxy s10 samsung galaxy s20 samsung galaxy s8¿Cuál sería el mejor enfoque? Estoy pensando en eliminar todo el texto y clasificarlo según los números enteros que quedan, pero si hiciera eso, en la lista actual, los modelos "galaxy" aparecerían entre los modelos "iphone" (lo que tampoco tiene sentido) así:
iPhone 6 iPhone 8 samsung galaxy s8 samsung galaxy s10 iPhone 11 iPhone 12 samsung galaxy s20Como tiene que ordenar el texto donde incluye números, haga lo siguiente:
return A.localeCompare(B, false, { numeric: true })Puede encontrar más información en localCompare y las opciones aquí
Así que tu código se verá así:
$('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');Manifestación
$('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>