Элементы сортировки jQuery с использованием идентификатора данных

(извините, если вопрос уже существует)

Я очень новичок в разработке jQuery.

У меня есть структура HTML следующим образом:

<div class="clist">
    <div data-sid=1></div>
    <div data-sid=2></div>
    <div data-sid=2></div>
    <div data-sid=1></div>
    <div data-sid=2></div>
    <div data-sid=2></div>
    <div data-sid=1></div>
</div>

Я хотел бы отсортировать их как:

<div class="clist">
    <div data-sid=1></div>
    <div data-sid=1></div>
    <div data-sid=1></div>
    <div data-sid=2></div>
    <div data-sid=2></div>
    <div data-sid=2></div>
    <div data-sid=2></div>
</div>

Я использую функцию

function sortContacts() {
var contacts = $('div.clist'), cont = contacts.children('div');

cont.detach().sort(function(a, b) {
            var astts = $(a).data('sid');
            var bstts = $(b).data('sid')
            //return astts - bstts;
            return (astts > bstts) ? (astts > bstts) ? 1 : 0 : -1;
        });

contacts.append(cont);
}

Но он работает не так, как ожидалось.

Он работает хорошо в первый раз, но при добавлении нового элемента или изменении файла данных он не работает.

EDIT:

Демонстрационный

http://jsfiddle.net/f5mC9/1/

не работает?

Ответы

Ответ 1

Вы можете использовать свойство dataset, в котором хранятся все пользовательские атрибуты data-* элемента, он возвращает строку, в случае, если вы хотите преобразовать строку в число, которое вы можете использовать parseInt или +.

$('.clist div').sort(function(a,b) {
     return a.dataset.sid > b.dataset.sid;
}).appendTo('.clist');

http://jsfiddle.net/CFYnE/

И да, ваш код работает здесь, http://jsfiddle.net/f5mC9/

Изменить: Обратите внимание, что IE10! и ниже не поддерживают свойство .dataset, если вы хотите поддерживать все браузеры, вы можете вместо этого использовать метод jQuery .data():

$('.clist div').sort(function(a,b) {
     return $(a).data('sid') > $(b).data('sid');
}).appendTo('.clist');

Ответ 2

$('.clist div').sort(function(a,b) {
     return a.dataset.sid > b.dataset.sid ? 1 : -1; //be carefull, string comparaison
}).appendTo('.clist');

или, возможно,

$('.clist div').sort(function(a,b) {
     return parseInt(a.dataset.sid) - parseInt(b.dataset.sid);
}).appendTo('.clist');

sort() обрабатывает отрицательные/положительные значения,

Ответ 3

Более общая функция для сортировки элементов с помощью jQuery:

$.fn.sortChildren = function (sortingFunction: any) {

    return this.each(function () {
        const children = $(this).children().get();
        children.sort(sortingFunction);
        $(this).append(children);
    });

};

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

$(".clist").sortChildren((a, b) => a.dataset.sid > b.dataset.sid ? 1 : -1);