jQuery sort() is not sorting

Question

I want to sort a li within divs alphabetical by jQuery

At the moment, something indefinable happens. Is apparently sorted without a pattern.

Here is a snippet of my html

<ul id="ui-id-1" tabindex="0" class="ui-menu ui-widget ui-widget-content ui-autocomplete ui-front">
  <li class="ui-menu-item">
    <div id="ui-id-149" tabindex="-1" class="ui-menu-item-wrapper">Great Britain</div>
  </li>
  <li class="ui-menu-item">
    <div id="ui-id-128" tabindex="-1" class="ui-menu-item-wrapper">Austria</div>
  </li>
  <li class="ui-menu-item">
    <div id="ui-id-150" tabindex="-1" class="ui-menu-item-wrapper">Nigeria</div>
  </li>
  <li class="ui-menu-item">
    <div id="ui-id-169" tabindex="-1" class="ui-menu-item-wrapper">Morocco</div>
  </li>
  <li class="ui-menu-item">
    <div id="ui-id-132" tabindex="-1" class="ui-menu-item-wrapper">Turkey</div>
  </li>
  <li class="ui-menu-item">
    <div id="ui-id-133" tabindex="-1" class="ui-menu-item-wrapper">Romania</div>
  </li>
  <li class="ui-menu-item">
    <div id="ui-id-134" tabindex="-1" class="ui-menu-item-wrapper">Belgium</div>
  </li>
  <li class="ui-menu-item">
    <div id="ui-id-135" tabindex="-1" class="ui-menu-item-wrapper">Netherlands</div>
  </li>
  <li class="ui-menu-item">
    <div id="ui-id-136" tabindex="-1" class="ui-menu-item-wrapper">Luxembourg</div>
  </li>
  ...
</ul>

the js:

var $lis = $('.ui-menu-item');
var alphabeticallyOrderedLis = $lis.sort(function(a, b) {
  return $(a).find("div").text() > $(b).find("div").text();
});
$(".ui-autocomplete").html(alphabeticallyOrderedLis);

But please visit the fiddle to check it on your own: https://jsfiddle.net/the_taeq/jwx1w729/

Am I really that stupid?

Taplar · Accepted Answer · 2018-03-02 17:59:55Z

2

$(a).find("div").text().localeCompare($(b).find("div").text());

You need to properly compare the string values. Strings do not play nicely with < or > typically.

Ref. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare

answered Mar 2, 2018 at 17:59

Taplar

25k4 gold badges24 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rasitha Ariyarathna · Accepted Answer · 2018-03-02 18:04:46Z

1

Use this jquery code

$( document ).ready(function() {
    var $list = $("#ui-id-1");

  $list.children().detach().sort(function(a, b) {
    return $(a).text().localeCompare($(b).text());
  }).appendTo($list);
});

answered Mar 2, 2018 at 18:04

Rasitha Ariyarathna

17110 bronze badges

Comments

Rk dev tech · Accepted Answer · 2021-05-18 12:03:45Z

0

suppose you have space in the string at position 0 then this code work for me

$(a).find("div").text().trim().charAt(0).toUpperCase().localeCompare($(b).find("div").text().trim().charAt(0).toUpperCase());

answered May 18, 2021 at 12:03

Rk dev tech

1941 silver badge16 bronze badges

Collectives™ on Stack Overflow

jQuery sort() is not sorting

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related