在 div 标签和 jQuery 中按数字对 div 进行排序

Question

我正在尝试使用 jQuery 对 div 列表进行排序。基本上该列表可能如下所示：

<div class="contest_entry"><img src="image.png" /><span class="votes">14</span></div>
<div class="contest_entry"><img src="image.png" /><span class="votes">8</span></div>
<div class="contest_entry"><img src="image.png" /><span class="votes">2</span></div>
<div class="contest_entry"><img src="image.png" /><span class="votes">2</span></div>
<div class="contest_entry"><img src="image.png" /><span class="votes">2</span></div>
<div class="contest_entry"><img src="image.png" /><span class="votes">21</span></div>

我正在尝试使用一些 jQuery 自动将 div 按最高数字排序到最低数字。我该怎么办？感谢您的任何指导！我想我应该补充一点，排序应该发生在页面加载上。 :)

Answer 1

我为此写了small plugin。随意偷。 基本上你选择元素，对它们进行排序，然后以新的顺序重新添加。

================================================ ================================

根据 Jason 的要求，包括此处的代码

$(".contest_entry").orderBy(function() {return +$(this).text();}).appendTo("#parent_div");

#parent_div 是.contest_entrys 的容器。

+ 只是一种将值转换为数字以强制进行数字比较而不是字符串比较的偷偷摸摸的方式（除非这是您想要的）。

orderBy() 是我写的一个排序插件。从那以后我稍微安静地扩展了它，但这里是简单的版本：

jQuery.fn.orderBy = function(keySelector)
{
    return this.sort(function(a,b)
    {
        a = keySelector.apply(a);
        b = keySelector.apply(b);
        if (a > b)
            return 1;
        if (a < b)
            return -1;
        return 0;
    });
};

Answer 2

这些方面的一些事情应该有效：

var list = [];

function sortDivs(a,b)
{
    return parseInt(a.text(), 10) - parseInt(b.text(), 10);
}

$('contest_entry').each(function () {
    list.push(this);
    $(this).detach();
})

list.sort(sortDivs)

for (var x = 0; x < list.length; x++) {
    $('#parent_el').append(list[x]);//where parent_el is the place you want to reinsert the divs in the DOM
}

Answer 3

var jVotes = $('div.contest_entry span.votes'), vals = [];
jVotes.each(function() {
    var numVotes = $(this).html(); // may also be able to use .text()
    vals.push(numVotes);
    $(this).data('num-votes', numVotes);
});
vals.sort(function(a, b) {
    return (a < b) ? -1 : (a > b) ? 1 : 0;
});
var jParent = $('selector for parent container');
for (var i = 0; i < jVotes.length; i++) {
    jParent.append(jParent.find('[data-num-votes=' + vals[i] + ']'));
}

Answer 4

$(function(){ 
    var sortedList = $('.contest_entry').toArray().sort(function(lhs, rhs){ 
        return parseInt($(rhs).children("span.votes").text(),10) - parseInt($(lhs).children("span.votes").text(),10); 
    });
    //the variable 'sortedList' holds the divs ordered. All you need to do is place them in the DOM.
}); 

这是一个工作示例：http://jsfiddle.net/ZCvUa/