javascript - 如何对一组 jQuery 对象进行排序(但不是它们在 DOM/标记中的位置)

Question

我们有以下标记

<input type="checkbox" class="foo" />
<input type="checkbox" class="foo" />
<input type="checkbox" class="foo" />

在某些时候，我用 jQuery 为每个实例注入(inject)一个 data-keyValuePair(每个实例都是唯一的 - 我有几个调用 - 示例只涵盖一个赋值):

$('myMagicSelector').data('counter', '1');

现在我尝试用下面的代码对这个实例进行排序

var $checkboxes = $('.foo').filter('checked');
$checkboxes.sort(function (a, b) {
    var dataA = a.data('counter');
    var dataB = b.data('counter');

    return dataA < dataB;
});

我知道...这行不通...

• 如何在不在排序函数中引入 $(a) 和 $(b) 的情况下修复我的代码？
• 是否有任何库可以为我做这件事(特定于 jquery)？
• 还有其他意见吗？

非常重要的提示:
我不想更改我的 UI 中的顺序(不:没有 UI 排序...比如 tinySort )，并且我的 UI 中的顺序与预期结果不符 - 这就是我需要排序的原因苍蝇，而不是通过创建时的标记......

Answer 1

您可以使用 el.getAttribute("data-counter") 代替 $(a).data("counter")

var $checkboxes = $('.foo:checked');
$checkboxes.sort(function (a, b) {
    var dataA = a.getAttribute("data-counter");
    var dataB = b.getAttribute("data-counter");
    return dataA < dataB;
});

Example fiddle