JQuery - сортировка DIV для innerHTML детей

Ответ 1

Чтобы сделать этот вид напрямую, используя дочерние значения и без плагина, вы можете использовать что-то вроде:

function sortUsingNestedText(parent, childSelector, keySelector) {
    var items = parent.children(childSelector).sort(function(a, b) {
        var vA = $(keySelector, a).text();
        var vB = $(keySelector, b).text();
        return (vA < vB) ? -1 : (vA > vB) ? 1 : 0;
    });
    parent.append(items);
}

Сортировка по цене может быть выполнена следующим образом:

sortUsingNestedText($('#sortThis'), "div", "span.price");

Функция параметризуется так, что ее можно легко повторно использовать с другими div и разными ключами сортировки.

Вот демо: http://jsfiddle.net/tc5dc/

Использование плагина tinysort

В качестве альтернативы, если вы можете воспользоваться функциями, предоставляемыми плагином tinysort (упомянутым в вопросе), вы можете динамически увеличить свои div в соответствии с плагином.

Посмотрите эту демонстрацию: http://jsfiddle.net/6guj9/

В этом примере мы сначала добавляем значения price и style в качестве атрибутов данных холдинга div:

var sortThis = $('#sortThis').children("div");
sortThis.each(function() {
    var p = $(this);
    p.attr("data-price", p.find("span.price").text());
    p.attr("data-style", p.find("span.style").text());
});

Затем мы можем использовать tinysort для сортировки по соответствующим атрибутам. Сортировка по цене будет просто:

$("#sortThis>div").tsort({attr:"data-price"});

Изменение порядка сортировки и ключей может быть выполнено простым прохождением в разных конфигурационных объектах. Связанная демонстрация показывает один из способов сделать это, но вы, вероятно, можете придумать лучшую схему в соответствии с вашими потребностями.

Ответ 2

Вы можете сортировать с помощью jquery, выполняя

var mylist = $('ul');
var listitems = mylist.children("li");
listitems.sort(function(a, b) {
   var compA = $(a).text().toUpperCase();
   var compB = $(b).text().toUpperCase();
   return (compA < compB) ? -1 : (compA > compB) ? 1 : 0;
})
$(mylist).append(listitems);

Он автоматически сортирует по цене, если вы делаете

var mylist = $('#sortThis');
var listitems = mylist.children("div");
listitems.sort(function(a, b) {
   var compA = $(a).text().toUpperCase();
   var compB = $(b).text().toUpperCase();
    console.log((compA < compB) ? -1 : (compA > compB) ? 1 : 0);
   return (compA < compB) ? -1 : (compA > compB) ? 1 : 0;
})
$(mylist).append(listitems);

Я вижу, если я не могу что-то исправить, если:)

Есть что-то вроде:

if(sortorder === 'price') {

    var mylist = $('#sortThis');
    var listitems = mylist.children("div");
    listitems.sort(function(a, b) {
       var compA = $(a).children('.price').text().toUpperCase();
       var compB = $(b).children('.price').text().toUpperCase();
       return (compA < compB) ? -1 : (compA > compB) ? 1 : 0;
    })
    $(mylist).append(listitems);

} else if (sortorder === 'style') {

    var mylist = $('#sortThis');
    var listitems = mylist.children("div");
    listitems.sort(function(a, b) {
       var compA = $(a).children('.style').text().toUpperCase();
       var compB = $(b).children('.style').text().toUpperCase();
       return (compA < compB) ? -1 : (compA > compB) ? 1 : 0;
    })
    $(mylist).append(listitems);

}

Ответ 3

Первая часть помеченного ответа не сортируется правильно, я тестировал ее с использованием чисел от 1 до 100 и неправильно истолковал что-либо менее 10. Причина заключается в том, что он работает с текстовым значением и кодом ASCII вместо фактического числового значения.

Здесь я преобразовал текстовые значения в Integer, используя parseInt() перед сортировкой.

function sortUsingNestedText(parent, childSelector, keySelector) {
var items = parent.children(childSelector).sort(function(a, b) {
    var vA = parseInt($(keySelector, a).text());
    var vB = parseInt($(keySelector, b).text());
    return (vA < vB) ? -1 : (vA > vB) ? 1 : 0;
});
parent.append(items);
}

Тогда мы называем это тем же самым

sortUsingNestedText($('#sortThis'), "div", "span.price");

Ответ 4

Используйте мой jQuery-плагин SortContent:

$('#sortThis').sortContent({asc:true});

Вы можете использовать хелпер для сортировки в соответствии с подходящим контентом, который вы хотите.

$('#sortThis').sortContent({asc:true,helper:function(e){return $(e).find('.price').html()}})

если вы хотите изменить порядок, установите false в asc вариант

Еще одно примечание: вы можете напрямую выбирать дочерние элементы div вместо родительского: Это одно и то же:

$('#sortThis>div').sortContent({asc:true,helper:function(e){return $(e).find('.price').html()}})

ДЕМО:

http://jsfiddle.net/abdennour/ytmry/