订单按字母顺序排列，然后将空的div放在底部

Question

i字母顺序排序divsdivsdivs .instructor的内容：

var alphabeticallyOrderedDivs = jQuery('.entry').sort(function(a, b) {
    var $aTitle = jQuery(a).find('.instructor'), $bTitle = jQuery(b).find('.instructor');
    return String.prototype.localeCompare.call($aTitle.text().toLowerCase(), $bTitle.text().toLowerCase());
});

它效果很好。

但是，如果.instructor是空的，则将空的div放在顶部。我的问题是，如何在列表的底部添加空的？

所以当前，它返回：

empty
a
b
c
...

编辑

这是一个JSFIDDLE。请注意如何添加空div的字母顺序排列的div的顶部。我想要它在底部。

Answer 1

您可能会做这样的事情？

var alphabeticallyOrderedDivs = $('.entry').sort(function (a, b) {
    var $aTitle = $(a).find('.title'), $bTitle = $(b).find('.title');
    if ($bTitle.text().length === 0) {
        return -1;
    }
    if ($aTitle.text().length === 0) {
        return 1;
    }
    return String.prototype.localeCompare.call($aTitle.text().toLowerCase(), $bTitle.text().toLowerCase());
});

Answer 2

String.prototype.localeCompare如果方法返回正值，则在可比较字符串之后放置参考字符串($aTitle(。因此，您需要返回任何正值才能放下空名称：

var alphabeticallyOrderedDivs = $('.entry').sort(function (a, b) {
    var $aTitle = $(a).find('.title'), $bTitle = $(b).find('.title');
    if (!$aTitle.text()) return 1;
    if (!$bTitle.text()) return -1;
    return String.prototype.localeCompare.call($aTitle.text().toLowerCase(), $bTitle.text().toLowerCase());
});

此代码工作如下：

1. 如果A为空，请在B
之后放置
2. 如果A不是空的，但是B为空，则将B放置在A(返回-1(
之后
3. 如果没有任何字符串为空，请按值对它们进行排序

这是您的更新片段：

var alphabeticallyOrderedDivs = $('.entry').sort(function (a, b) {
    var $aTitle = $(a).find('.title'), $bTitle = $(b).find('.title');
    
    if (!$aTitle.text()) return 1;
    if (!$bTitle.text()) return -1;
    
    return String.prototype.localeCompare.call($aTitle.text().toLowerCase(), $bTitle.text().toLowerCase());
    });
var container = $(".container");
container.detach().empty().append(alphabeticallyOrderedDivs);
$('body').append(container);

.entry {
  border: 1px solid #CCC;
  padding: 5px;
  margin: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="entry">
    <div class="title">World</div>
  </div>
  <div class="entry">
    <div class="title">hello</div>
  </div>
  <div class="entry">
    <div class="title"></div>
  </div>
  <div class="entry">
    <div class="title">Lorem</div>
  </div>
</div>