Question

我正在尝试向网页添加2个排序选项。目前，当我单击相应的链接（.alpha和.finish）时，我在屏幕上看到一个动画，可以看出名称正在移动，但输出保持不变。下面是我在谷歌搜索中找到的JSFiddle我正在使用的jQuery脚本。

var $divs = $('div.col-xs-3');
$('.alpha').on('click', function () {
    var alphabeticallyOrderedDivs = $divs.sort(function (a, b) {
        return $(a).attr('data-name') > $(b).attr('data-name');
    });
    $('.people').html(alphabeticallyOrderedDivs);
});

$('.finish').on('click', function () {
    var numericallyOrderedDivs = $divs.sort(function (a, b) {
        return $(a).attr('id') < $(b).attr('id');
    });
    $('.people').html(numericallyOrderedDivs);
});

我正在使用Django来显示页面，并且当前有一个order_by来按字母顺序正确地对每个div进行排序。这会影响吗？

Answer 1

三件事：

jQuery没有正式的sort功能，所以不要依赖它。
它确实具有（非正式地）来自Array.prototype的排序函数。我们将直接使用那个。 sort函数回调的工作方式，预计返回数字，而不是布尔值：如果第一个参数应该出现在第二个参数之前，则为负数，如果它们与排序目的相等则为0，如果第二个应该出现在第一个之前，则大于零。
正式地说，html不接受jQuery对象或数组（只是字符串和函数），所以让我们使用empty().append(...)代替：

因此，要修复问题中的代码，首先我们使用get从jQuery集中获取一个真正的数组，然后我们使用localeCompare来正确比较这些名称：

var $divs = $('div.col-xs-3');
$('.alpha').on('click', function () {
    var alphabeticallyOrderedDivs = $divs.get().sort(function (a, b) {
    // Note -----------------------------^^^^^^
        return $(a).attr('data-name').localeCompare($(b).attr('data-name'));
    // Note -------------------------^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    });
    $('.people').empty().append(alphabeticallyOrderedDivs);
    // Note -----^^^^^^^^^^^^^^
});

<input type="button" class="alpha" value="Alpha">
  <div class="people">
  <div class="col-xs-3" data-name="q">q</div>
  <div class="col-xs-3" data-name="p">p</div>
  <div class="col-xs-3" data-name="j">j</div>
  <div class="col-xs-3" data-name="e">e</div>
  <div class="col-xs-3" data-name="t">t</div>
  <div class="col-xs-3" data-name="d">e</div>
  <div class="col-xs-3" data-name="a">a</div>
  <div class="col-xs-3" data-name="q">q</div>
  <div class="col-xs-3" data-name="r">r</div>
  <div class="col-xs-3" data-name="x">x</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

jQuery没有重新排列我的Django页面上的元素

1 个答案: