Question

我有一个列表，我想用jquery重新排序。这在桌面上工作正常但在移动设备（iphone）上它没有进行重新排序。这是我的代码：

<div class="quick-action-list">
    <a class="alpha">Sort A to Z</a> <a class="alpha_reverse" style="display:none;">Sort Z to A</a>
  <ul>
    <li><a title="A" href="">A</a></li>
    <li><a title="B" href="">B</a></li>
    <li><a title="C" href="">C</a></li>
    <li><a title="D" href="">D</a></li>
    <li><a title="E" href="">E</a></li>
    <li><a title="F" href="">F</a></li>
    <li><a title="G" href="">G</a></li>
    <li><a title="H" href="">H</a></li>
  </ul>
</div>

我的jquery：

$('.quick-action-list .alpha').on('click', function () {
        var $actions = $(this).closest(".quick-action-list").find("ul li");
        var alphabeticallyOrderedActions = $actions.sort(function (c, d) {
            return $(c).find("a").text() > $(d).find("a").text();
        });
        $(this).closest(".quick-action-list").find("ul").html(alphabeticallyOrderedActions);
        $(this).closest(".quick-action-list").find('.alpha_reverse').show();
        $(this).hide();
    });

    $('.quick-action-list .alpha_reverse').on('click', function () {
        var $actions = $(this).closest(".quick-action-list").find("ul li");
        var alphabeticallyOrderedActions = $actions.sort(function (c, d) {
            return $(c).find("a").text() < $(d).find("a").text();
        });
        $(this).closest(".quick-action-list").find("ul").html(alphabeticallyOrderedActions);
        $(this).closest(".quick-action-list").find('.alpha').show();
        $(this).hide();
    });

而不是点击我尝试('click touchstart')或仅('touchstart')，但这也不起作用。它会切换<a>，但不会对列表重新排序。

以下是小提琴中的代码：https://jsfiddle.net/06e4g53h/1/

我的问题是，为什么touchstart（或点击）切换链接但实际上没有重新排序列表？任何见解都将不胜感激。

Answer 1

您没有正确使用Javascript的.sort（）函数。它应该返回整数而不是真/假。

而不是

var alphabeticallyOrderedActions = $actions.sort(function (c, d) {
  return $(c).find("a").text() < $(d).find("a").text();
});

尝试

var alphabeticallyOrderedActions = $actions.sort(function (c, d) {
  return $(c).find("a").text() < $(d).find("a").text() ? -1 : $(c).find("a").text() > $(d).find("a").text() ? 1 : 0;
});

同时查看更新的小提琴：https://jsfiddle.net/06e4g53h/3/

Jquery重新排序列表不适用于移动设备

1 个答案: