Сортировка div по номеру внутри тега div и jQuery

Question

Я пытаюсь отсортировать список div с помощью jQuery.По сути, список может выглядеть так:

<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

Я написал небольшой плагин только для этой цели.Не стесняйтесь воровать.В основном вы выбираете элементы, сортируете их и повторно вводите в новом порядке.

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

По запросу Джейсона, включая код здесь

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

#parent_div - контейнер для .contest_entry s.

+ - это просто хитрый способ преобразования значения в число для принудительного сравнения чисел, а не сравнения строк (если это не то, что вам нужно).

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

$(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/

Answer 4

Что-то в этом роде должно работать:

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
}