Question

点击后，我试图按升序排序此类，然后按降序排序。当我单击它时，排序在升序中正常工作，但不适用于降序。请帮我做这个工作。我认为这与我的else语句有关，因为if语句运行得很好。：）

$(".id").click(function(){
  var mylist = $('.sort');
  var listitems = mylist.children('tr').get();
  listitems.sort(function(a, b) {
    var compA = $(a).text().toUpperCase();
    var compB = $(b).text().toUpperCase();
    if ((compA < compB) ? -1 : (compA > compB) ? 1 : 0){
      return (compA < compB) ? -1 : (compA > compB) ? 1 : 0;
    } else {
      return (compB < compA)  ? 1:(compB > compB)? 1 : 0;
    }
  });
  $.each(listitems, function(idx, itm) { mylist.append(itm); });
});

Answer 1

将排序功能更改为：

listitems.sort(function (a, b) {
    var compA = $(a).text().toUpperCase();
    var compB = $(b).text().toUpperCase();
    if(compA < compB) {
        return -1;
    } else if(compA > compB) {
        return 1;
    } else {
        return 0;
    }
});

您还可以使用内置的Array方法对数组进行排序：

var sortedArr = Array.prototype.sort(listitems);

Answer 2

您需要在点击的按钮或链接上切换有关排序方向的信息，
例如。将排序方向存储在data-sort-direction之类的数据属性中，其中升序的值为asc和desc或0 排序和1 降序排序类型。

因此，点击后您会检索此属性值，并根据当前值asc或desc，0或1对项目进行排序，然后在 .sort（）方法决定是否必须返回1，-1或0

if (an > bn) {
    return sortDirection === "asc" ? 1 : -1;
}
if (an < bn) {
    return sortDirection ==="asc" ? -1 : 1;
}
return 0;

<强> HTML

<button class="id" data-sort-direction="asc">Sort</button>
<table id="sort" class="table">
    <tr data-name="John Doe">
        <td>Mr. John Doe</td>
    </tr>
    <tr data-name="Trent Richardson">
        <td>Mr. Trent Richardson</td>
    </tr>
    <tr data-name="Cindy Smith">
        <td>Ms. Cindy Smith</td>
    </tr>
    <tr data-name="Bill Williams">
        <td>Mr. Bill Williams</td>
    </tr>
    <tr data-name="Jane Doe">
        <td>Mrs. Jane Doe</td>
    </tr>
</table>

<强> JS

var mylist = $('#sort'),
    listitems = mylist.children('tbody').children('tr');
$('.id').on('click', function (e) {
    var button = $(this),sortDirection = button.data('sort-direction');
    // update data attribute for the next click
    sortDirection === "asc"?button.data('sort-direction', "desc"):button.data('sort-direction', "asc");
    listitems.sort(function (a, b) {
        var an = a.getAttribute('data-name'),
            bn = b.getAttribute('data-name');
        if (an > bn) {
            return sortDirection === "asc"?1:-1;
        }
        if (an < bn) {
            return sortDirection ==="asc"?-1:1;
        }
        return 0;
    });

    listitems.detach().appendTo(mylist);
});

从<tr>代码中检索<table>项时要小心，即使您在html中省略了<tbody>，也有隐含的<tr>，因此您必须获取listitems = mylist.children('tbody').children('tr');这样的项目：

{{1}}

Fiddle with <tr>

Fiddle with <div>

jQuery排序不下降

2 个答案: