在超过 13 个项目的可排序列表中按字母顺序对元素进行排序

Question

我正在使用 jQuery UI 创建多个相互关联的可排序列表

html:

  <div class="ulContainer">
    <div class="liHdr">Unassigned</div>
    <div class="ulWraper">
      <ul class="connectedSortableUl un ui-sortable">
        <li class="ui-state-default" style="">Frank Smith
          <input type="hidden" class="rowName" value="frank.smith">
          <input type="hidden" class="rowEmail" value="frank.smith@email.com">
          <input type="hidden" class="rowId" value="8VNe0ZT1v0">
          <input type="hidden" class="rowTeam" value="">
          <div class="panel-options" style="float:right;"><a href="#" class="sm"><i class="entypo-pencil"></i></a></div>
        </li>
      </ul>
    </div>
  </div>

等等....还有几个相同的

jQuery:

// create the sortable ui
$(".connectedSortableUl").sortable({
    connectWith: ".connectedSortableUl",
    placeholder: "ui-state-highlight",
    create: function(event, ui) {
        sort();
    }
});


// custom sort function to sort our sortable lists
function sort() {
    var sortableLists = $('.connectedSortableUl');
    $(sortableLists).each(function(index, element) {

        var listitems = $('li', element);

        listitems.sort(function(a, b) {
            var seeA = $(a).text().toUpperCase(); //just to see what's going on
            var seeB = $(b).text().toUpperCase(); //just to see what's going on
            return ($(a).text().toUpperCase() > $(b).text().toUpperCase())
        });
        $(element).append(listitems);
    });

}

我希望此函数按字母顺序对每个列表进行排序，其中 A 位于顶部和底部的 Z
对于短列表，13 个或更少的项目，此功能按预期工作。
但是，如果列表包含 14 个或更多项，就会出现问题，列表现在会按预期排序。

为什么逻辑会因超过 13 个列表项而崩溃，我该怎么做才能修复它或以其他方式达到预期的结果？

jsFiddle example

Answer 1

比较两个字符串 > returns 一个布尔值，但 sort 需要一个数字。与 localeCompare 比较：

listitems.sort(function (a, b) {
  var ta = $(a).text().toUpperCase();
  var tb = $(b).text().toUpperCase();
  return ta.localeCompare(tb);
});

在超过 13 个项目的可排序列表中按字母顺序对元素进行排序

Alphabetically sort elements in sortable list with over 13 items

javascript

jquery

jquery-ui

jquery-ui-sortable