jQuery sort（）不是排序

Question

我想用jQuery按字母顺序对div进行排序

目前，一些无法确定的事情发生了。显然没有模式排序。

这是我的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>

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);

但请访问小提琴自行检查：https://jsfiddle.net/the_taeq/jwx1w729/

我真的那么傻吗？

Answer 1

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

您需要正确比较字符串值。弦乐通常不会与<或>很好地配合。

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

Answer 2

使用此jquery代码

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

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