根据数据排序属性对 div 进行排序答案

【问题标题】：Sorting Divs based on data-sort attribute根据数据排序属性对 div 进行排序
【发布时间】：2013-08-02 20:56:52
【问题描述】：

不确定，为什么它不起作用。我参考了一堆堆栈溢出的答案，但似乎没有什么不同。我只是想通过 data-sortStart 属性对 class="searchMe" 的所有 div 进行排序。 data-sortStart 部分工作正常，所以我没有在本例中包含该函数，但它基本上是一个 for 循环，它为循环中的每个连续 div 提供 += 1 的 data-sortStart。

这是我的代码：

$("#search_button").on("click", function() {
  appendicize($('.searchMe').sort(reSort));
});

function appendicize(el){
  var container = $('#whatWhat');
      container.html('');
  el.each(function(){
    $(this).appendTo(container);
  });
}

$('.searchMe').reSort(function (a, b) {
  var contentA = $(a).attr('data-sortStart'),
      contentB = $(b).attr('data-sortStart');
  return (contentA < contentB) ? -1 : (contentA > contentB) ? 1 : 0;
})

【问题讨论】：

我没有看到你在哪里有一个名为 reSort 的函数，用于$('.searchMe').sort(reSort)，或者你在哪里定义了一个名为 reSort 的 jQuery 插件，用于$('.searchMe').reSort(function (a, b) {。
...您的意思是 function reSort(a, b) {... 而不是 $('.searchMe').reSort(function (a, b) {？
仅供参考，您可以使用return contentA.localeCompare(contentB)。
如果您打算进行数字比较，则需要将数字字符串转换为数字。所以var contentA = +$(a).attr('data-sortStart')...等等。这意味着不再有.localeCompare()。
是的，比较相同小数位的数字字符串时没有必要。但如果它们不相等，则例如字符串 "10" 被认为低于字符串 "2"

标签： javascript jquery sorting search append

【解决方案1】：

Crazy Train 指出的解决方案如下：

$(#search_button).click(function() {
  appendicize($('.searchMe').sort(reSort));
});

function appendicize(el){
  var container = $('#whatWhat');
      container.html('');
  el.each(function(){
    $(this).appendTo(container);
  });
}

function reSort(a, b) {
  var contentA = +$(a).attr('data-sortStart'),
      contentB = +$(b).attr('data-sortStart');
  return (contentA < contentB) ? -1 : (contentA > contentB) ? 1 : 0;
}

在 reSort 函数中的变量初始值设定项之前添加一个“+”将正确地将 data-sortStart 属性作为整数而不是字符串进行比较（字符串 10 小于 2），这解释了为什么我得到元素 #10 和#11 排序在 #2 元素之上。最初 reSort 函数也没有被调用，因为我是这样写的：

$('.searchMe').reSort(function (a, b) {

而不是这样：

function reSort(a, b) {

第一种方法是不必要的，因为我在调用函数时已经在上面传递了 $('.searchMe')：

appendicize($('.searchMe').sort(reSort));

再次感谢疯狂的火车 :)

【讨论】：