Jquery - сортировка DIV по innerHTML детей - PullRequest
Новая
       14

Jquery - сортировка DIV по innerHTML детей

36 голосов
/ 20 октября 2011

У меня есть HTML, который выглядит примерно так: 

<div id="sortThis">
<div id="1">Price:<span class="price">20</span><span class="style">blue</span></div>
<div id="2">Price:<span class="price">23</span><span class="style">red</span></div>
<div id="3">Price:<span class="price">10</span><span class="style">red</span></div>
<div id="4">Price:<span class="price">29</span><span class="style">green</span></div>
<div id="5">Price:<span class="price">35</span><span class="style">blue</span></div>
</div>

И я хочу иметь возможность сортировать по .price или .style

Я подозреваю, что этот пост частично отвечает на мой вопрос: Сортировка Div в Jquery на основе атрибута 'data-sort'?

И этот плагин близок к тому, чтобы делать то, что мне нужно (поскольку он может обрабатывать дочерние атрибуты), но, похоже, он не идет так далеко, как детский innerHTML: http://tinysort.sjeiti.com/

Любая помощь будет оценена этим нубом.

Ответы [ 4 ]

69 голосов
/ 20 октября 2011

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

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

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

9 голосов
/ 20 октября 2011

Вы можете сортировать с помощью 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:)

Получилось что-то вроде: 

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

}
1 голос
/ 09 февраля 2016

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

Здесь перед сортировкой я преобразовал текстовые значения в целые числа, используя 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");
1 голос
/ 13 сентября 2013

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

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

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

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

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

Еще одно примечание: вы можете выбрать непосредственно потомков div вместо parent: Это то же самое: 

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

DEMO:

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

...