jQuery不重新排列元素在我的Django页面

jQuery Not Rearranging Elements on my Django Page

本文关键字：元素 我的 Django 页面 排列 新排列 jQuery      更新时间：2023-09-26

我正在尝试添加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。这对它有影响吗?

三件事:

  1. jQuery没有正式的sort函数，所以不要依赖它

  2. 它确实有(非正式地)从Array.prototype获得的排序函数。我们直接用这个。排序函数的回调工作方式，它期望返回一个数字，而不是一个布尔值:如果第一个参数应该出现在第二个参数之前，则为负数，如果它们在排序目的中相等，则为0，如果第二个参数应该出现在第一个参数之前，则大于0。

  3. 官方，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>

相关文章：