Sorting divs by number inside div tag and jQuery

Question

I'm trying to sort a list of divs with jQuery. Essentially the list might look like this:

<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>

I'm trying to use some jQuery to automatically sort the divs by highest number to lowest. How could I go about this? Thanks for any direction! Guess I should add that the sort should happen on pageload. :)

Answer 1

I wrote a small plugin just for this purpose. Feel free to steal. Basically you select elements, sort them, and reappend in the new order.

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

Per Jason's request including code here

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

#parent_div is a container for the .contest_entrys.

The + is just a sneaky way to convert value to number to force number compare rather than string compare (unless that is what you want).

orderBy() is a sorting plugin that I wrote. I expanded on it quiet a bit since then, but here is the simple version:

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

Some thing along these lines should work:

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.
}); 

Here is a working example: http://jsfiddle.net/ZCvUa/