0

I want to sort some child divs under a parent div. The child divs has alphanumeric id. For example: "1_tango" , "5_charlie", "unassigned".

For the above example, the sort result should be:

"unassigned" , "1_tango" , "5_charlie",

The code I am using from here:

var mylist = $(this.sub_group_drop_zone);
var listitems = mylist.children('div').get();
listitems.sort(function (a, b) {
    var compA = $(a).text().toUpperCase();
    var compB = $(b).text().toUpperCase();
    return (compA > compB) ? -1 : (compB > compA) ? 1 : 0;
   })
$(mylist).append(listitems);

However this results in :

"unassigned", "5_charlie", "1_tango", "3_Beta" ..

How can I fix that. Any idea would be appreciated.

Tokai
  • 15
  • 6
  • 1
    you can use [`localeCompare`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare) which can be made case-insensitive and offers numeric sorting options. – pilchard May 17 '22 at 21:17
  • See my answer [here](https://stackoverflow.com/a/71923995/438273) for an example of using [`String.prototype.localeCompare()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare). – jsejcksn May 17 '22 at 21:19
  • I am not using string array or list. Here listitmes are list of jquery elements. – Tokai May 17 '22 at 21:27
  • @jsejcksn did not work :( " " " listitems.sort(function (a, b) { const locale = undefined; const options = { numeric: true, sensitivity: 'base', }; return $(b).text().localeCompare($(a).text(), locale, options); }) " " " – Tokai May 17 '22 at 21:37
  • @pilchard I have seen and tried localCompare. An example suits my case would be nice. – Tokai May 17 '22 at 21:38
  • `listitems.sort((a, b) => $(a).text().localeCompare($(b).text(), { sensitivity: 'base' }));` – pilchard May 17 '22 at 21:41
  • @pilchard unfortunately does not work either. Just removed the `numeric: true` . from the option. – Tokai May 17 '22 at 21:45
  • 1
    What 'doesn't work' ? To sort `unassigned` first you'll need a second comparison. [fiddle](https://jsfiddle.net/m5h8joxu/) – pilchard May 17 '22 at 21:47
  • @pilchard Yes, in your shared fiddle, output looks correct. Now I have to adapt to them jquery element list instead of normal string list. Sorry I am new to javascript/typescript. – Tokai May 17 '22 at 21:56
  • I mocked the jquery `$()` function so you should be able to use the sort method directly. – pilchard May 17 '22 at 21:57
  • @pilchard unfortunately, in javascript it works. but in typescript, it complains. `The left-hand side of an arithmetic operation must be of type 'any', 'number', 'bigint' or an enum type.ts(2362) ` – Tokai May 17 '22 at 22:15
  • Ah, that's just because I didn't explicitly convert the booleans before subtracting. you can simply use the [unary plus (+)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Unary_plus) to convert each before subtracting `+($(b).text() === 'unassigned') - +($(a).text() === 'unassigned')`. [updated fiddle](https://jsfiddle.net/sxcu3z4v/) and [TS playground](https://tsplay.dev/wOP4RN) – pilchard May 17 '22 at 22:31
  • @pilchard previous error is solved with unary plus. Now only one error left with sensitivity parameter. ` Argument of type '{ sensitivity: string; }' is not assignable to parameter of type 'string | string[] | undefined'. ` – Tokai May 17 '22 at 22:37
  • 1
    yes, i forgot the second parameter is actually locale and the third is options(`localeCompare(compareString, locales, options)`), it should read `$(a).text().localeCompare($(b).text(), undefined, { sensitivity: 'base' })` passing undefined here as `locale` but if you prefer a locale then you can pass it, ie `$(a).text().localeCompare($(b).text(), 'en', { sensitivity: 'base' })` for 'english' – pilchard May 17 '22 at 22:39
  • thanks a lot , now it's working as expected. :) – Tokai May 17 '22 at 22:43
  • Great, glad you got it working! – pilchard May 17 '22 at 22:44

0 Answers0