Js按attr按字母顺序排序不起作用[重复]答案

【问题标题】：Js Alphabetical sort by attr doesn't work [duplicate]Js按attr按字母顺序排序不起作用[重复]
【发布时间】：2021-10-27 03:36:53
【问题描述】：

我尝试按 attr alt 的字母顺序对我的课程进行排序，但它不起作用并且我没有找到错误。

<div class="box" alt="B"></div>
<div class="box" alt="A"></div>
<div class="box" alt="C"></div>
<div class="box" alt="E"></div>
<div class="box" alt="F"></div>
<div class="box" alt="D"></div>

var boxes = $('.box');

var orderedBoxes = boxes.sort(function(a, b){
return $(a).attr('alt') - $(b).attr('alt')
});

console.log(orderedBoxes)

【问题讨论】：

减法仅适用于数字，不适用于字符串。
另外——不是这里的问题——“alt”属性只对<img>元素有效，这可能会使你的HTML无效；可能-再次：与您的问题无关-最好使用title或自定义data-*属性。

标签： javascript jquery

【解决方案1】：

您可以使用String.prototype.localeCompare

var boxes = $('.box');

var orderedBoxes = boxes.get().sort(function(a, b){
  return $(a).attr('alt').localeCompare($(b).attr('alt'));
});

console.log(orderedBoxes)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box" alt="B"></div>
<div class="box" alt="A"></div>
<div class="box" alt="C"></div>
<div class="box" alt="E"></div>
<div class="box" alt="F"></div>
<div class="box" alt="D"></div>

【讨论】：

【解决方案2】：

您可以使用简单的 jQuery 插件分离节点、排序和重新附加。

(function($) {
  function detatchAndSort($nodes, comparator) {
    $nodes.parent().append($nodes.detach().sort(comparator));
    return $nodes;
  };
  $.fn.sortByAttr = function(attr) {
    return detatchAndSort(this, function(that, other) {
      return $(that).attr(attr).localeCompare($(other).attr(attr));
    });
  };
  $.fn.sortByText = function() {
    return detatchAndSort(this, function(that, other) {
      return $(that).text().localeCompare($(other).text());
    });
  };
})(jQuery);

$('.box').sortByAttr('alt'); // Sort in-place

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box" alt="B">B</div>
<div class="box" alt="A">A</div>
<div class="box" alt="C">C</div>
<div class="box" alt="E">E</div>
<div class="box" alt="F">F</div>
<div class="box" alt="D">D</div>

【讨论】：